在Vue Js中验证使用vform

Question

我在我的应用程序中使用Vue Js和Laravel。我的代码有产品和图像。我能够使用axios上传图像，但是当我添加vform来验证所有图像时，没有图像传递给控制器。当我交换axios。post('/senddata'， formData, config)到这个表单。post('/senddata'， formData, config)传递其他数据，但图像为空。这是我的代码;

saveImageData(){
var self=this;
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
document.getElementById('upload-file').value=[];
let formData = new FormData();
formData.append('title', this.form.title);
formData.append('description', this.form.description);
formData.append('location', this.form.location);
formData.append('price', this.form.price);
for(let i=0;i<this.form.images.length;i++){
formData.append('images[]', this.form.images[i]);
}

axios.post('/senddata', formData, config)
.then(function (response) {
})
.catch(function (error) {
});

Answer 1

查看GitHub中的vform示例文档，该文档指导您上传带有其他输入字段的图像:

https://github.com/cretueusebiu/vform/blob/master/example/upload.html

我认为这个例子可以解决你的问题:

selectFile (e) {
const file = e.target.files[0]
// Do some client side validation...
this.form.file = file
this.form.submit('post', '/upload', {
// Transform form data to FormData
transformRequest: [function (data, headers) {
return objectToFormData(data)
}],
onUploadProgress: e => {
// Do whatever you want with the progress event
// console.log(e)
}
})
.then(({ data }) => {
// ...
})
}