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}}}

hui_life

3219人浏览 · 2020-06-28 15:24:43

hui_life · 2020-06-28 15:24:43 发布

背景：
项目中需要用到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 => {
});