【爬坑日记】利用axios进行post提交formdata

近期在利用axios向后台传数据时，axios默认传的是用application/json格式，若后台需要的数据格式为key/value格式，可以在axios的config中进行配置，也可以用qs.stringify()方法进行转换

注：若用原生的<form>标签对后台进行post传输数据，默认即为key/value格式

关于encodeURI()、encodeURIComponent()

如果你是通过form提交的，那就不需要用这个了。但是如果是你使用url的方式
例如：ajax提交到后台的，就需要对url进行encodeURI编码， 否则，会导致后台出现各种乱码，不加encodeURI的话，默认浏览器编码格式提交， 这样的话，浏览器不同，传到后台的值也就不同了， 所以建议使用encodeURI统一编码为utf-8的格式到后台，然后后台再处理再解码就行了

关于encodeURI()、encodeURIComponent()区别

它们都是编码URL，唯一区别就是编码的字符范围，其中
encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&()=:/,;?+'
encodeURIComponent 方法不会对下列字符编码 ASCII字母、数字、~!() 所以encodeURIComponent比encodeURI编码的范围更大。 实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会

数据转换前，axios的默认传输

转换为formData后，利用axios传输

方法一：在vue中axios的配置

this.$axios({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  // 利用 transformRequest 进行转换配置
  transformRequest: [
    function(oldData){
      // console.log(oldData)
      let newStr = ''
      for (let item in oldData){
        newStr += encodeURIComponent(item) + '=' + encodeURIComponent(oldData[item]) + '&'
      }
      newStr = newStr.slice(0, -1)
      return newStr
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: dataObj,
})

方法二：利用qs.stringify()进行转换

import qs from 'qs' // qs在安装axios后会自动安装，只需要组件里import一下即可

// 代码省略...

dataObj = qs.stringify(dataObj) // 得到转换后的数据为 string 类型

this.$axios({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: dataObj,  // 直接提交转换后的数据即可
})

更新补充：

方法三：利用URLSearchParams()进行转换

假设需要传参为

let param = {
    aa: 'aaaa',
    bb: 'bbbb'
}

// 组件内直接使用URLSearchParams()

let params = new URLSearchParams()
params.append('aa', 'aaaa')
params.append('bb', 'bbbb')

this.$axios.post('https://jsonplaceholder.typicode.com/posts', params: params).then(()=>{})