一、简介
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]
参考链接
Vue axios 发送 FormData 请求
