axios的Content-Type類型導致后台無法解析數據

四種常見POST 請求的 Content-Type數據類型：

• application/x-www-form-urlencoded
• multipart/form-data
• application/json  （axios中默認請求頭的編碼）
• text/xml

 

1. application/x-www-form-urlencoded

　　　　　　1.1 用 URLSearchParams 傳遞參數

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})

需要注意的是： URLSearchParams 不支持所有的瀏覽器，但是總體的支持情況還是 OK 的，所以優先推薦這種簡單直接的解決方案

　　　　1.2  配置axios請求頭中的content-type為指定類型

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}

　　　　1.3  將參數轉換為query參數, 利用qs

　　　　　　　　引入 qs ，這個庫是 axios 里面包含的，不需要再下載了。

import Qs from 'qs'
let data = {
    "username": "cc",
    "psd": "123456"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

2  Content-Type: multipart/form-data

對於這種類型的數據，我們常見前端頁面上傳個人圖像，然后點擊保存發送后端修改原始數據。解決辦法下：

let params = new FormData()
        params.append('file', this.file)
        params.append('id', localStorage.getItem('userID'))
        params.append('userName', this.name)
        params.append('sex', this.sex)
        params.append('mobile', this.phone)
        params.append('email', this.email)
        params.append('qq', this.qq)
        params.append('weChat', this.WeChat)

        axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
          if (res.data.code === 0) {
            this.$router.go(-1)
          }
        }).catch(error => {
          alert('更新用戶數據失敗' + error)
        })