使用VueJS、axios和Laravel上载文件

你好，我正在建设一个项目。其中用户最多可以发送5幅图像和10首带有文本的歌曲。但当我向服务器发送请求时，我无法获取这些文件，而我在服务器上处理Laravel

//VueJS中的我的数据对象
数据（）{
返回{
formData:new formData（），
皮克尔：{
正文：“”，
},
孤岛加载：false，
图像：[]，
歌曲：[]，
}
}
//VuejS中的imagePreview方法
图像预览（事件）{
让输入=event.target；
if（输入文件[0]）{
如果（input.files.length{
这个.images.push（即target.result）；
}
reader.readAsDataURL（input.files[i]）；
}
from（数组（event.target.files.length.keys（））
.map（x=>{
这是.formData
.append（'图像'，
event.target.files[x]，event.target.files[x].name）；
});
}否则{
警报（“最多可上传5张图像”）；
}
}
}
//来自VueJS的musicPreview方法
音乐回顾（活动）{
让输入=event.target；
如果（input.files.length{
这是.formData
.append（'歌曲'，
event.target.files[x]，event.target.files[x].name）；
});
}否则{
警报（“最多可上传10首歌曲”）；
}
}
//VueJS中的sharePikir方法
sharePikir（）{
this.formData.append（'body'，this.pikir.body）；
axios.put（'/api/pikirler'，this.formData）
。然后（响应=>{
this.pikir.body=''；
this.isLoading=false；
})
.catch（（）=>{
this.isLoading=false；
});
}，

Näme paýlaşmak isleýrsiňiz{{pikirSymbolLimit}
帕ý拉ş麦

哦，是的！您缺少此部分。您需要定义此部分

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

这是我的解决办法

导出默认值{
数据（）{
返回{
附件：{name:null，file:null}
}
},
方法：{
onFileChange（事件）{
this.attachment.file=event.target.files[0]
},
attachmentCreate（）{
var form=new FormData（）；
form.append（'name'，this.attachment.name）；
form.append（'file'，this.attachment.file）；
这是.http.post（'attachment'，form）。然后（response=>{
控制台日志（“oke”）
})
},
}
}

---

Occam的剃须刀。你甚至不需要form.append（'name'，this.attachment.name）；在上面的示例中，文件的名称与以下行一起提供：form.append（'file'，this.attachment.file）；本例中的名称是'file'。干得好，迪克！也许你可以帮助我。看看这个：