javascript - 使用 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 Controller 方法是这样开始的:

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" />

然后在您的 Controller 代码中您将拥有:

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

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

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

所以你可以设置fileFormDataName来改变上传字段名称，否则默认为file。

如果您无法在文档中或通过检查 HTML 找到字段名称，最简单的方法就是上传(即使不成功)并使用 Chrome 中的开发人员工具检查网络请求:

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