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) {
                });

Node.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：意外字段！

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

已解决：如果有人遇到问题，那就很烦人了！：

现在这是我的vue.js 2.0代码，请注意“ Content-Type”：“未定义” ：

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);
  }
});

使用Vue和Multer的Axios多个上传

0 个答案: