一、简介
axios 默认是 Payload 格式数据请求，但有时候后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。
Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的：
Payload：
|
1 |
Content-Type: 'application/json; charset=utf-8' |
Form Data：
|
1 2 3 |
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 请求（下面有这几种方式格式化参的数据样本，用于参考比较，看需求选择方式）
方式一，自己封装一个格式化函数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
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 格式化会过滤空数组数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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' } }) |
方式三，数组会被转换成字符串（这种不是特殊情况一般不会使用上）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 } |
三、上面方式，参数格式化之后：
方式一 格式化出来的数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 数组无值 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"}] |
方式二 格式化出来的数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 数组无值 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 |
方式三 格式化出来的数据：
|
1 2 3 4 5 6 7 8 9 10 11 |
// 数组无值 id: 743 intention: 2 follower_id: concat_material: // 数组有值 id: 2086 intention: follower_id: 66,351 concat_material: [object Object],[object Object] |