vue axios传递FormData填坑,headers不显示,后台报错等等问题
你可能在以下vue axios的FormDara的文件上传中,有headers不显示问题,或遇到了以下报错
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Current request is not a multipart request
网上有很多这类问题的解决方案,而且很简单,很有效,不过,还是要先检查你的vue axios全局配置中是否有配置以下代码
//整理数据
// 只适用于 POST,PUT,PATCH,transformRequest` 允许在向服务器发送前,修改请求数据
axios.defaults.transformRequest = function(data) {
data = qs.stringify(data);
return data;
};
你默认的axios请求数据被字符串化(stringify),导致了headers不显示,以及以下全系列的报错
哈哈,没想到吧!.jpg
现在可以拍一下自己的脑门,轻微地口吐芬芳,我被这个坑了3天
下面开始正题:
let formData = new FormData();
formData.append("file", file);
formData.append("abc", "223");
const instance = this.axios.create({
transformRequest(data) {
//直接返回,不做任何处理
return data;
}
})
instance.post(url, formData).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error);
});
覆盖默认值就欧克了,headers也显示出来了,后台错误也不报了
亲测有效,成功示例图.jpg
如果后台还是这类报错,也有以下解决方案
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
let config = {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
}
};
this.axios.post(url, formData, config).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error);
});
后台报错解决参考地址:https://blog.csdn.net/qq_41688165/article/details/80834842
原创地址:https://blog.csdn.net/wojiaoYBT/article/details/104234957