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

【问题标题】：Uploading a file with ng-file-upload directive to a sails.js server使用 ng-file-upload 指令将文件上传到sails.js 服务器
【发布时间】：2014-11-16 14:07:33
【问题描述】：

我正在尝试使用以下指令将文件上传到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];
   ...
   }
...
}

然而，当服务器函数被调用，并且 body 上的 json 数据存在时，req.file('不管放在这里') 回调没有找到文件。

提前致谢。

【问题讨论】：

我不熟悉sails，但我有类似的情况与express，我最终配置了一个中间件来处理请求的post/file，我使用了busboy，也许你可以找到一个类似的帆的方法
我猜你没有给req.file() 正确的参数，即文件正在上传的字段的名称。绝对不是item-image。你试过req.file('file')吗？
虽然我最终自己发现了这一点，但你的解决方案是正确的，@sgress454。请把它写成一个完整的答案，这样我就可以这样标记它。
另外，@sgress454，你似乎是sails.js 的核心贡献者，我想花点时间告诉你我爱你:)。

标签： javascript node.js angularjs file-upload sails.js

【解决方案1】：

一件重要的事情，如果您想在后端处理多个文件，请使用：

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

您需要像这样在Upload.upload({}) 中添加arrayKey: '' 参数：

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

【讨论】：

【解决方案2】：

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。

【讨论】：