Vue axios 发送 FormData 请求

一、简介

• 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: 'dzm' }, 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: 'dzm' }, 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: 'dzm' }, 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]