报错信息
报错原因
代码
后端代码
接收的接口:
@PostMapping("/change/picUrl")
@ApiOperation("修改用户头像")
public ResponseResult changeUrl(@RequestParam("file") MultipartFile file) {
return mkUserService.changeUrl(file);
}
前端代码
<el-upload
:action="headerPicUploadApi"
:show-file-list="false"
:auto-upload="true"
:on-success="uploadPicSuccess"
:on-error="uploadPicError"
:headers="headerPic"
:before-upload="beforeUpload"
:name="'file'"
>
方法啥的见官网文档
解决方法(有点妥协):
打开el-upload 的自动上传开关 :auto-upload=“true” 然后 :before-upload=“beforeUpload” (这个方法是会在自动上传前触发),我们就在beforeUpload这个方法里完成我们图片上传,然后返回false就会终止自带的图片上传
const beforeUpload = (file: any) => {
console.log(file);
let formData = new FormData();
formData.append('file', file);
let config = {
headers: {'Content-Type': 'multipart/form-data'}
};
proxy.$axios.post(headerPicUploadApi, formData, config)
.then((res: any) => {
console.log(res.data);
// 此处只做示例
})
return false;
}
Tips:这是我的解决方法,因为我不太懂前端,希望各位大佬能纠正~