Vue axios 发送 FormData 请求

一、简介

  • axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。

  • PayloadForm 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/jsonapplication/x-www-form-urlencoded 都是表单数据发送时的编码类型。

    • formenctype 属性为编码方式,常用有两种:application/x-www-form-urlencodedmultipart/form-data,默认为 application/x-www-form-urlencoded

    • actionget 时候,浏览器用 x-www-form-urlencoded 的编码方式把 form 数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串 appendurl 后面,用 ?分割,加载这个新的 url

    • actionpost 时候,浏览器把 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]
    
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页