一、简介
axios默认是Payload格式数据请求，但有时候后端接收参数要求必须是Form Data格式的，所以我们就得进行转换。Payload和Form Data的主要设置是根据请求头的Content-Type的值来的：
Payload：Content-Type: 'application/json; charset=utf-8'Form Data：Content-Type: 'application/x-www-form-urlencoded'Content-Type: 'multipart/form-data'
- 上面三种
Content-Type值介绍
application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型。form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。- 当
action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。 - 当
action为post时候，浏览器把form数据封装到http body中，然后发送到server。 - 如果没有
type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 - 但是如果有
type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。
二、发送 formdata 请求（下面有这几种方式格式化参的数据样本，用于参考比较，看需求选择方式）
- 方式一，自己封装一个格式化函数：
import axios from 'axios' ################################### 请求方式一，全局使用 // 创建 axios 实例 const service = axios.create({ baseURL: '', timeout: 20000, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) // 将请求数据转换成功 formdata 接收格式 service.defaults.transformRequest = (data) => { return stringify(data) } ################################### 请求方式二，局部使用 axios({ method: 'post', url: 'http://localhost:8080/dzm', data: { username: 'dzm', password: 'dzm123456' }, transformRequest: [ function (data) { // 将请求数据转换成功 formdata 接收格式 return stringify(data) } ], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) ################################### 转换方法封装 // 将参数转换成功 formdata 接收格式 function stringify (data) { const formData = new FormData() for (const key in data) { // eslint-disable-next-line no-prototype-builtins if (data.hasOwnProperty(key)) { if (data[key]) { if (data[key].constructor === Array) { if (data[key][0]) { if (data[key][0].constructor === Object) { formData.append(key, JSON.stringify(data[key])) } else { data[key].forEach((item, index) => { formData.append(key + `[${index}]`, item) }) } } else { formData.append(key + '[]', '') } } else if (data[key].constructor === Object) { formData.append(key, JSON.stringify(data[key])) } else { formData.append(key, data[key]) } } else { if (data[key] === 0) { formData.append(key, 0) } else { formData.append(key, '') } } } } return formData }
- 方式二，使用
qs组件，但是qs格式化会过滤空数组数据：
import axios from 'axios' // qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用 import qs from 'qs' ################################### 请求方式一，全局使用 // 创建 axios 实例 const service = axios.create({ baseURL: '', timeout: 20000, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) // 将请求数据转换成功 formdata 接收格式，这一段选方式一那种拦截转换也可以。 service.interceptors.request.use(config => { const token = Vue.ls.get(ACCESS_TOKEN) if (token) { // 让每个请求携带自定义 token 请根据实际情况自行修改 config.headers['X-Token'] = token } // 将请求数据转换成功 formdata 接收格式 config.data = qs.stringify(config.data) return config }, err) ################################### 请求方式二，局部使用 axios({ method: 'post', url: 'http://localhost:8080/dzm', data: { username: 'dzm', password: 'dzm123456' }, transformRequest: [ function (data) { // 将请求数据转换成功 formdata 接收格式 return qs.stringify(data) } ], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
- 方式三，数组会被转换成字符串（这种不是特殊情况一般不会使用上）
import axios from 'axios' ################################### 请求方式跟上面一样 axios({ method: 'post', url: 'http://localhost:8080/dzm', data: { username: 'dzm', password: 'dzm123456' }, transformRequest: [ function (data) { // 将请求数据转换成功 formdata 接收格式 return stringify(data) } ], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) ################################### 转换方法封装 // 将参数转换成功 formdata 接收格式 function stringify (data) { let ret = '' for (const it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } ret = ret.substring(0, ret.lastIndexOf('&')) return ret
三、上面方式，参数格式化之后：
- 方式一 格式化出来的数据：
// 数组无值 id: 2086 intention: follower_id[]: concat_material[]: // 数组有值 id: 2086 intention: follower_id[0]: 351 follower_id[1]: 66 // 数组 json 为空会被转成正常的数组，有值会被转成字符串，所以服务器需要注意处理 concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]
- 方式二 格式化出来的数据：
// 数组无值 id: 2086 intention: // 数组有值 id: 2086 intention: follower_id[0]: 351 follower_id[1]: 66 concat_material[0][fname]: 视频订单.xls concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls concat_material[1][fname]: 视频订单1.xls concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls
- 方式三 格式化出来的数据：
// 数组无值 id: 743 intention: 2 follower_id: concat_material: // 数组有值 id: 2086 intention: follower_id: 66,351 concat_material: [object Object],[object Object]
