1.需求
vue项目中，通过axios或者二次封装的axios上传文件（图片，文档，工作表等）。后台接收FormData类型的数据。现在的项目一般来说后台接收数据为JSON字符串，接收文件为FormData表单。
2.分析
一般来说，项目都会对axios进行二次封装。直接使用axios，或者自己二次封装axios的情况，应该对请求的各种配置比较清楚了。对axios和网络协议理解不充分并 直接使用其他人二次封装的axios 时多会对此有疑问，或者在上传文件时遇到障碍。因为二次封装的axios中的一些前置配置影响到了表单形式的提交。
3.解决方案
先说下以表单形式发送的一些前置设置。
一般我们首先需要一个表单标签，和input标签。这个表单标签的主要作用呢就是生成FormData类型的数据。一般我们有自己的上传文件按钮和预览文件盒子，所以我把原始input[type='file']隐藏了。注意：表单提交形式需要写好对应的name，作为后台读数据时键值对的键。
图1.标签设置
js内把数据存为表单形式，将表单的Dom作为参数传入new FormData（）中即可获得表单类型的数据。我们直接把这个FormData型的数据传递给后台即可。注意：FormData不能做JSON字符串转换。下图中的config是指请求头headers的设置。
图2.取数据
按理来说FormData数据正确，headers设置'Content-Type':'multipart/form-data'就可以正确传递了。这是最表面的设置也是最基本的设置，但是有些同志设置后还是不好用。那么我就要再强调一次，需要写好对应的name，FormData不能做JSON字符串转换. 写好name这个大家因该都理解，也是比较低级的错误。那我为什么要强调不能做字符串转换呢。一个原因是在后台在接收其他数据多为JSON字符串，另一个原因就是二次封装的axios可能包含了前置操作（字符串转换）。
图3.前置操作
如图3，红框内就是对传递的参数做前置操作（JSON字符串转换）。使用二次封装的axios时一定要查看是否有如上的代码，被这里代码做JSON字符串转换后，就会导致FormData无法正常提交。
解决方案：1.不适用二次封装的axios，直接使用原型axios。
2.修改二次封装的axios，添加提交表单类型的情况处理。
ps.我二次封装过一个axios，包含了传递JSON，FormData，以及接收Blob的情况。
详情可以阅读我的相关文章 axios二次封装。
或者查看我gitee上的源码 axios.js
转载到其他平台需含本文的简书链接
网友评论