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