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

Posted 2023-02-22

【中文标题】如何使用 bootstrap-vue 上传多个文件

【英文标题】：How to Upload multiple files using bootstrap-vue

【发布时间】：2020-08-26 13:08:37

【问题描述】：

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

穆特的设置

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 上丢失了一些东西，但我不知道是什么。 如果有人可以帮助我将不胜感激

【问题讨论】：

什么是this.$api？您能否显示您的 Postman 请求参数的屏幕截图？

@Phil 我编辑并添加了 Postman 的截图。 this.$api 是一个 axios 连接，如果你认为它是 util 我也可以放那个代码。

【参考方案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 标头。在提交 FormData 实例时，您的浏览器会为您处理这些问题。

【讨论】：

非常感谢，这行得通。我不知道为什么我将 files[0] 放在首位。你为我节省了很多时间。