axios文件上传 formdata_vue&axios通过FormData上传文件

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'就可以正确传递了。