【爬坑日記】利用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,  // 直接提交轉換後的數據便可
})
複製代碼