Vue 3.0 + axios + formdata图片上传formdata 为空

背景:
项目中需要用到ImageCropper控制上传图片的比例。结果formdata一直为空。

原始代码如下:

let formData = new FormData();
formData.append("file", data);
let config = {
	headers: {
		"Content-Type": "multipart/form-data",
		"Access-Token": token
		}
	}
};
//此时formData中存在file
_this.axios.post(url, formData, config).then(response => {
});

需要注意的是 formData 需要使用 formData.getAll(‘file’) 或者 formData.get(‘file’) 查看里面内容。

然而Network中查看的请求内容一直是空。
Vue 3.0 + axios + formdata图片上传formdata 为空_第1张图片
在网上找了很多的解决方法,都没什么用,很郁闷他们是怎么生效 。
后来看到某个博主说FormData被序列化之后转为空的Object对象。因此沿着这个方向去定位。

最后发现,在dispatchRequest中有一个步骤transformData,
Vue 3.0 + axios + formdata图片上传formdata 为空_第2张图片
Vue 3.0 + axios + formdata图片上传formdata 为空_第3张图片
可以看出config.data 经过transformData已经被转换了,并且默认的transformRequest配置不支持文件格式。
transformRequest 是一个请求转化器,主要功能是在请求前对数据进行转换。如果想深入了解的话 可以参考 https://www.imooc.com/article/32292?block_id=tuijian_wz (就喜欢这样分析源码的博主,赞ing)。

所以,需要修改 transformRequest 。
代码如下:

let formData = new FormData();
formData.append("file", data);
let config = {
	headers: {
		"Content-Type": "multipart/form-data",
		"Access-Token": token,
		//因为我的请求内容只有file,如果formdata复杂的话,建议参考上面的链接
		transformRequest: [data => data]
		}
	}
};

_this.axios.post(url, formData, config).then(response => {
});

成功!
Vue 3.0 + axios + formdata图片上传formdata 为空_第4张图片

你可能感兴趣的:(转载学习)