Axios множественная загрузка с Vue и Multer - PullRequest
Новая
       26

Axios множественная загрузка с Vue и Multer

0 голосов
/ 07 ноября 2019

Мне нужно сделать несколько загрузок файлов с помощью 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 такой же, как в документе.

Это мой код мультера: 

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»: «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);
  }
});
...