【爬坑日記】利用axios進行post提交formdata

BenjaminC發表於2018-07-04
iOSORM

近期在利用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的預設傳輸

【爬坑日記】利用axios進行post提交formdata

轉換為formData後，利用axios傳輸

【爬坑日記】利用axios進行post提交formdata

方法一：在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,  // 直接提交轉換後的資料即可
})
複製程式碼

相關文章