Question

我正在尝试使用此角度包https://github.com/danialfarid/angular-file-upload上传多个文件以及一些表单数据。这是我的代码：

var files = ... // get the files (this is working, don't worry)

return $upload.upload({
    url: '/some_resource',
    type: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    data: { myObj: JSON.stringify(myObj) },
    file: files
});

如果files中只有一个文件，则会正确上传 - 但如果有多个文件，则不会上传任何内容。在文档中，它说：

上传多个文件：仅对于HTML5 FormData浏览器（不是IE8-9），如果将文件数组传递给文件选项，它将在一个请求中将所有文件一起上传。

我不确定我是否做错了（我正在使用Chrome）。

我的下一个猜测是问题出现在后端（我正在使用Express.js）。由于请求为'multipart/form-data'，因此我通过multer（https://github.com/expressjs/multer）运行该请求，如下所示：

app.post('/some_resource', multer({ dest: '../tmpUploads' }), function(req, res) {
    console.log(req.files); // <- prints {} when uploading multiple files
});

就像我说的，当files只包含一个文件时，我的设置工作正常。任何帮助将不胜感激！

Answer 1

以下是我的工作方式。

var files = [...] // array of the file objects
var fileNames = [...]
// a name in [fileNames] shares the same index as the file it names in [files]

return $upload.upload({
    url: '/some_resource',
    type: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    data: { myObj: JSON.stringify(myObj) },
    file: files,
    fileFormDataName: fileNames
});

我的node.js后端：

app.post('/some_resource', multer({ dest: '../tmpUploads' }), function(req, res) {
    // req.files is an object, where, in terms of the frontend
    // and backend variables, req.files[fileNames[i]] = files[i]
});

多个文件上传无效

1 个答案: