如何使用 bootstrap-vue 上传多个文件

Question

我正在尝试使用 multer 将一些文件发送到我在 node.js 中的 api，当我使用 Postman 进行测试时效果很好，但是当我使用我的 vue 应用程序时，我得到 "Unexpected field".

Multer 的设置

var storage = multer.diskStorage({
destination: (req, file, cb) => {
  cb(null, 'public/img/products')
},
filename: (req, file, cb) => {
  cb(null, file.originalname)
}
});
var upload = multer({storage: storage}).array('files');

图片上传

router.post('/NewImageOnProduct/:id', function (req, res) {
upload(req, res, function (err) {
    const files = req.files;
if (err) {
  // An error occurred when uploading
        console.log(err);
        if(!files);
            return res.status(400).send(lang.MissingInfo);

  return res.status(500).send(err);
}

    var newArray = files.map(function(file) {
        return [file.filename, req.params.id];
    });

    pool.query('INSERT INTO tbl_ImagensProdutos (ImagemProduto_nome, produto_id) values ?',
    [
        newArray
    ], function (error, results) {
        if (error) {
            if(error.errno == 1452)
                return res.status(500).send('O produto ao qual está a tentar atribuir uma imagem não existe');
                console.log(error)
            return res.status(500).send(error);
        }
        return res.status(200).send({
            response: "Imagem inserida com sucesso"
        });
    });
// Everything went fine


});
});

前端输入

<b-form-file v-model="files" :state="Boolean(files)" placeholder="Choose a file or drop it here..." multiple accept="image/*"></b-form-file>

上传功能

let formData = new FormData()
  for (var i = 0; i < this.files.length; i++) {
    let file = this.files[i]

    formData.append('files[' + i + ']', file)
  }

  formData.forEach(item => {
    console.log(item)
  })

  this.$api
    .post(`/Admin/products/NewImageOnProduct/` + this.id, formData)
    .then(response => {
      if (response.status === 200) {
        alert(response.data.response)
        this.getDataProducts()
        this.getDataCharacteristicsByProduct()
        this.getProductImages()
        this.resetFormCharacteristics()
      }
    })
    .catch(e => {
      console.log(e.response)

      if (e.response.status == 400) {
        alert('Informação em falta')
        console.log(e.response)
      } else if (e.response.status == 500) {
        console.log(e.response)
        // Colocar mensagem de erro para utilizador repetido
        alert('Erro ao adicionar imagens do produto! \n Tente novamente')
      } else if (e.response.status == 422) {
        console.log(e.response.error)
      }
    })

邮差图片 我认为 b-form-file 中缺少某些内容，但我不知道是什么。如果有人能提供帮助，我将不胜感激

Answer 1

Multer 需要一个字段名称为 files 的文件数组，但您设置的是 files[0]、files[1] 等

在您的提交处理程序中试试这个

const formData = new FormData()
for (let file of this.files) {
  formData.append('files', file, file.name) // note, no square-brackets
}

此外，在您的 Axios 配置中，请确保您未为该请求设置任何 Content-type headers。提交 FormData 实例时，您的浏览器会为您处理。

如何使用 bootstrap-vue 上传多个文件

How to Upload multiple files using bootstrap-vue

node.js

vue.js

multer

axios