Vue axios 发送 FormData 请求，Vue Axios发送FormData请求的方法与实例

摘要：使用Vue和axios发送FormData请求是一种常见的前端开发操作。通过Vue框架，可以轻松集成axios库，实现HTTP请求的发送。FormData对象用于封装表单数据，方便在请求中发送表单字段和文件等信息。通过axios发送FormData请求，可以简化前端与后端之间的数据交互过程，提高开发效率和用户体验。

一、Content-Type 值介绍

在HTTP请求中，Content-Type 用来表示请求体的数据类型，常见的值有 'application/json'，'application/x-www-form-urlencoded'，以及 'multipart/form-data'。

1、application/json 和application/x-www-form-urlencoded 都是表单数据发送时的编码类型。

2、form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded 和multipart/form-data，默认为application/x-www-form-urlencoded。

3、当action为get时，浏览器使用x-www-form-urlencoded的编码方式将form数据转换成一个字符串（name1=value1&name2=value2...），然后把这个字符串append到url后面。

4、当action为post时，浏览器把form数据封装到http body中，然后发送到服务器。

5、如果没有type=file的控件，使用默认的application/x-www-form-urlencoded就可以了。

6、但是如果有type=file的话，就要用到multipart/form-data了，浏览器会把整个表单以控件为单位分割，并为每个部分加上信息，如Content-Disposition（form-data或者file）、Content-Type（默认为text/plain）、name（控件name）等，并加上分割符（boundary）。

二、发送formdata请求

有几种方式可以格式化参的数据样本，用于比较和选择适合的方式。

方式一，自己封装一个格式化函数：

创建axios实例，设置baseURL、timeout和headers（'Content-Type': 'application/x-www-form-urlencoded'），在默认或局部使用请求中，将请求数据转换成功formdata接收格式，这里需要实现一个转换方法，将参数转换成功formdata接收格式。

方式二，使用qs组件，但qs格式化会过滤空数组数据：

同样创建axios实例并设置headers，在请求拦截器中，将请求数据使用qs.stringify转换成formdata接收格式，这种方式较为常见且方便。

方式三，数组会被转换成字符串（这种不是特殊情况一般不会使用上）：

实现一个转换方法，将请求数据转换成功formdata接收格式，这种方式较为特殊，一般不会在实际项目中使用。

自我介绍及资料分享

作者毕业于上海交大，在前端领域有丰富的经验，曾就职于大厂及华为、OPPO等知名公司，现在阿里任职，深知大多数前端工程师提升技能的不易，因此整理了一份全面的Web前端开发全套学习资料，旨在帮助自学提升的朋友，资料包含从零基础到进阶的课程内容，基本涵盖了95%以上的前端开发知识点，并且会持续更新，由于文件较大，这里仅展示了部分目录内容，如果觉得这些内容有帮助，可以扫码获取完整资料。（资料价值较高，非无偿）

除了上述学习方式外，学习html5、css、javascript等基础知识还可以通过看书、阅读优秀博客等方式进行，常见的javascript书籍如《JavaScript的高级程序设计》是每位前端工程师必备的一本书，在实践中也会用到js性能相关的书籍和设计模式，资料的领取方式可以通过指定途径获取。