如何使用bootstrap

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

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上缺少某些内容，但我不知道是什么。如果有人可以帮助我，将不胜感激

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实例时，您的浏览器会为您处理。

如何使用bootstrap

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

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上缺少某些内容，但我不知道是什么。如果有人可以帮助我，将不胜感激

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实例时，您的浏览器会为您处理。