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中查看的请求内容一直是空。

在网上找了很多的解决方法，都没什么用，很郁闷他们是怎么生效 。
后来看到某个博主说FormData被序列化之后转为空的Object对象。因此沿着这个方向去定位。

最后发现，在dispatchRequest中有一个步骤transformData,


可以看出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 => {
});

成功！