使用ng-file-upload指令将文件上载到sails.js服务器

Question

我正在尝试使用此指令将文件上传到sails.js应用程序服务器： ng-file-upload

我的客户端上传已经选择的图片是：

$upload.upload({
        url:'upload/item-image',
        headers:{
            'Content-Type': 'multipart/form-data'
        },
        data:{blah:'blah'},
        file: $scope.uploadFile,
        fileName:$scope.uploadFile.name
    }).success(function(data){
        console.log(data);
    }).error(function(err){
        console.log(err);
    });

我在服务器上处理上传的sails.js控制器方法如下所示：

upload: function (req, res) {
    req.file('item-image').upload(function (err, files) {
        if (err)
            return res.serverError(err);
        if(!files.length)
            return res.serverError('No files received for upload.');

        var file = files[0];
   ...
   }
...
}

但是，在调用服务器函数时，并且正文上的json数据存在，req.file（'无论放在何处'）回调没有找到任何文件。

提前致谢。

Answer 1

req.file的参数必须是请求中Sails应该查找上传文件的字段的名称。如果您正在使用以下内容执行简单的HTML表单：

<input type="file" name="myFileField" />

然后在您的控制器代码中，您将拥有：

req.file('myFileField').upload(...);

使用像此问题中引用的ng-file-upload小部件这样的上传器小部件，有时候弄清楚该字段名称是什么有点棘手。在这种情况下，它隐藏在usage instructions：

中

//fileFormDataName: myFile, // or a list of names for multiple files (html5). 
                            // Default is 'file' 

因此，您可以设置fileFormDataName来更改上传字段名称，否则默认为file。

如果您无法在文档中找到字段名称或通过检查HTML，最简单的方法就是上传（即使它不成功）并使用以下方法检查网络请求Chrome中的开发者工具：

这是来自Angular文件上传演示页面。您可以在右下方看到name="myFile"所在的位置;这就是你要找的东西。在这种情况下，文件字段称为myFile。

Answer 2

一件重要的事情，如果您想使用以下方法处理后端中的多个文件：

req.file('files').upload({...});

您需要在arrayKey: ''中添加Upload.upload({})参数，如下所示：

Upload.upload({
   url: 'http://localhost:1337/uploads',
   arrayKey: '',
   data: {
    files: files
   }