如何使用bootstrap"/>
如何使用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
发布评论