express - axios 使用 vue 和 multer 多次上传

Question

我需要使用 vue.js 2.0 和 multer 上传多个文件。

我已经按照这个文档进行了多次上传： https ://serversideup.net/uploading-files-vuejs-axios/

这是我的 Vue 模板：

<label>Files
    <input name="streamfile" type="file" id="files" ref="files" multiple @change="handleFileUploads" />
</label>
<a v-on:click="submitFiles" class="btn btn-primary">Submit</a>

我的 axios 查询与文档中的相同。

这是我的 multer 代码：

var upload = multer({ dest: "uploads/" });
app.post("/files", upload.array("streamfile", 50), function(req, res, next) {
  console.log(req.files); // []
  console.log(req.body);
  var file = req.files;
  console.log(file);
  res.end();
});

我收到此错误：

MulterError: Unexpected field
    at wrappedFileFilter (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\multer\index.js:40:19)
    at Busboy.<anonymous> (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\multer\lib\make-middleware.js:114:7)
    at Busboy.emit (events.js:189:13)
    at Busboy.emit (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\busboy\lib\main.js:38:33)
    at PartStream.<anonymous> (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\busboy\lib\types\multipart.js:213:13)
    at PartStream.emit (events.js:189:13)
    at HeaderParser.<anonymous> (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\dicer\lib\Dicer.js:51:16)
    at HeaderParser.emit (events.js:189:13)
    at HeaderParser._finish (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\dicer\lib\HeaderParser.js:68:8)
    at SBMH.<anonymous> (C:\UwAmp\www\vue-starter-webpack-cli-4-node\node_modules\dicer\lib\HeaderParser.js:40:12)

单次上传运行良好，我已将其删除以避免任何冲突。

文件在前端正确导入：

File { name: "Builder.png", lastModified: 1571932750271, webkitRelativePath: "", size: 821185, type: "image/png" }
Uploadfiles.vue:52
File { name: "classic-music.png", lastModified: 1573131217357, webkitRelativePath: "", size: 4073, type: "image/png" }
Uploadfiles.vue:52
File { name: "dossier.pdf", lastModified: 1571842341052, webkitRelativePath: "", size: 320949, type: "application/pdf" }
Uploadfiles.vue:52

编辑 ：

只要我只发送一个文件，它就可以工作：

Vue.js：

var formData = new FormData();
formData.append('file',this.files[0]);
axios.post(this.server + 'files',
                    formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function (response) {
                })
                .catch(function (error) {
                });

节点.js：

var upload = multer({ dest: "uploads/" });

    app.post("/files", upload.array("file", 10), function(req, res, err) {
      if (err) {
        console.log(err);
      }
      req.files.forEach(function(file) {
        console.log(file);
      });
    });

只要我试图发送一个数组，它就不起作用，并抛出MulterError: Unexpected field！

  formData.append(file,this.files[0]);
  formData.append(file,this.files[1]);

已解决：万一有人遇到问题，这很烦人！：

这是我现在的 vue.js 2.0 代码，请注意 'Content-Type': 'undefined'：

var formData = new FormData(); 
for (var i = 0; i < this.files.length; i++) {
    var file = this.files[i];
    formData.append('file', file);
}
axios.post(this.server + 'files',
    formData, {
        headers: { crossdomain: true,
            'Content-Type': 'undefined'
        }
    }
).then(function (response) {
})
.catch(function (error) {
});

和我的 node.js 代码：

var storageFiles = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "./uploads/files");
  },
  filename: function(req, file, cb) {
    let ext = file.originalname.substring(
      file.originalname.lastIndexOf("."),
      file.originalname.length
    );
    cb(null, file.originalname + "-" + Date.now() + ext);
  }
});

var uploadFiles = multer({ storage: storageFiles });


app.post("/files", uploadFiles.array("file", 10), function(req, res, err) {
  if (err) {
    console.log(err);
  }
});

标签： expressvuejs2axiosmulter