axios 表单（formData）方式提交请求，以及文件上传方式

---

一、使用表单格式请求

更改请求头 headers 中 content-type 为 application/x-www-form-urlencoded

axios 官方文档 application/x-www-form-urlencoded 格式请求

例子：

import qs from 'qs';

const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

qs 是一个 查询字符串解析增加安全性的一个库

如果使用 vue 脚手架创建项目，会自动安装 qs 库，没有就手动引入或者安装
qs 库 npm 地址

qs.stringify 做了什么，简单来讲，类似于（不仅仅如此，有兴趣了解详情可以看源码）

let params = {
	name: '小明',
	age: 18
}
let qStr = Object.keys(params).map(v => `${v}=${encodeURI(params[v])}`).join('&')

// qStr 输出 为 name=%E5%B0%8F%E6%98%8E&age=18

这是格式化看起来很像，get 请求中的 参数

二、上传文件

上传文件一般都会使用表单数据（formData）上传

使用 FormData 构造函数

查看 FormData 构造函数 API

例子：

<input id="name" name="name"/>
<input id="age" name="age"/>
<input id="file" type="file" name="file" multiple>

let forms = new FormData()

forms.append('name', document.getElementById('name').value)
forms.append('age', document.getElementById('age').value)

let files = document.getElementById('file').files

// 上传多个文件
Array.from(files).forEach(item => {
	forms.append('file', item)
})


const options = {
  method: 'POST',
  // headers: { 'content-type': 'application/x-www-form-urlencoded' },
  // headers: { 'content-type': 'multipart/form-data' },
  data: forms,
  url,
};
axios(options);

提交的数据格式如下

总结

文件上传 并不一定需要 更改请求头 headers 中 content-type 为 application/x-www-form-urlencoded

只需要使用 FormData 格式的数据即可，具体怎么传，还得根据后端接口对应更改

下班时间到了，以上信息如有疏漏或错误，欢迎指正。