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

Question

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

Multer的设置

(?<title>.+?)[ ]*(?:\((?<series>%[^)]+)\)|\((?<people>@[^)]+)\)|\((?<tags>#[^)]+)\))*(?<extension>\.[^.]+)$

图片上传

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>

邮递员图片 我认为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标头。提交FormData实例时，浏览器会为您处理。