vue 및 multer를 사용한 Axios 다중 업로드

vue 및 multer를 사용한 Axios 다중 업로드

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>

my axios 쿼리는 doc와 동일합니다.

이것은 나의 멀티코드입니다.

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)

단일 업로드가 정상적으로 동작하고 있습니다.경합을 피하기 위해 삭제했습니다.

파일은 프런트 엔드로 올바르게 Import 됩니다.

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

편집:

1개의 파일만 전송하면 동작합니다.

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

및 my node.discode:

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

언급URL : https://stackoverflow.com/questions/58756078/axios-multiple-upload-with-vue-and-multer