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