我在Laravel Vue上传图片时遇到问题。我没有在项目中上传图片。这是我的代码
<form action="">
<input type="text" id="firstName" class="form-control" v-model="user.firstName" value="Frankie">
<input type="text" id="lastName" class="form-control" v-model="user.lastName" value="Apple">
<select v-model="user.profile.country" v-chosen="user.profile.country" class="option-select">
<option v-for="(country, key) in countries" :value="key">{{country}}</option>
</select>
<input type="file" ref="files" id="imgInp" multiple @change="selectFile">
<input type="button" class="button button__primary button__agree" value="Confirm" @click="submit">
</form>
<script>
export default {
data() {
return {
user : [],
files : [],
uploadFiles : [],
}
},
methods : {
selectFile() {
const files = this.$refs.files.files;
this.uploadFiles = [ ...this.uploadFiles, ...files];
this.files = [
...this.files,
..._.map(files, file => ({
name: file.name,
type: file.type,
size: file.size,
}))
];
},
submit() {
var data = {
'customerDetail': {
'firstName' : this.user.firstName,
'lastName' : this.user.lastName,
'address' : {
'country' : this.user.profile.country,
},
'application': {
'attachments' : this.uploadFiles,
},
},
};
const config = {
headers: { 'content-type': 'multipart/form-data' }
};
axios
.post(`/web/bookings`, data, config)
.then((e) => {
console.log(e);
})
.catch((e) => {
console.log(e);
})
},
},
}
</script>
但是当我提交数据时,它显示错误
Missing boundary in multipart/form-data POST data
如果删除config
数据,则不会上传我的图像。我不了解问题所在。请帮我解决这个问题。预先感谢