axios 使用post方式傳遞參數，後端接受不到

最近作vue項目，作圖片上傳的功能，使用get給後臺發送數據，後臺能收到，使用post給後臺發送圖片信息的時候，
vue axios post請求發送圖片base64編碼給後臺報錯HTTP 錯誤 414
請求一直報錯，顯示 request URI too large
後臺顯示一直沒有收到數據 參數爲null。網上查看了不少資料，才知道axios post傳參的問題。

this.$axios({ method: 'post', url:url, params: { is_iso:1, goods_id:goods_id } }).then((res)=>{ })

一開始我是這麼寫的 ，post裏面的數據放在params裏面，這樣是有問題的，在使用axios時，要注意到配置選項中包含params和data二者，覺得他們是相同的，實則否則。 
由於params是添加到url的請求字符串中的，用於get請求。
而data是添加到請求體（body）中的， 用於post請求。

而後我把params改成了data，後臺仍是接收不到，查閱了不少資料，須要把Content-Type爲application/x-www-form-urlencoded，
jquery在執行post請求時，會設置Content-Type爲application/x-www-form-urlencoded，因此服務器可以正確解析，而使用原生ajax、axios請求時，若是不顯示的設置Content-Type，那麼默認是text/plain，這時服務器就不知道怎麼解析數據了，因此才只能經過獲取原始數據流的方式來進行解析請求數據。

打開控制檯，報400，報錯信息是：傳遞的參數不存在，但在請求中看的到參數，只是參數的格式是Request Payload，具體也沒看懂是什麼，總之知道就是參數格式不對，查閱資料找到兩種解決辦法，代碼以下：

解決辦法：

1、URLSearchParams

一、在main.js裏 設置配置，修改Content-Type

import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; Vue.prototype.$axios = axios;

二、在組件vue裏

const url ='http://****你的接口****'; var params = new URLSearchParams(); params.append('key1', 'value1'); //你要傳給後臺的參數值 key/value params.append('key2', 'value2'); params.append('key3', 'value3'); this.$axios({ method: 'post', url:url, data:params }).then((res)=>{ });

這樣後臺就收到數據了 請求成功;不過這個方法兼容性很是很差，ie瀏覽器徹底不兼容。

2、使用qs

安裝qs,在 main.js裏引入

import axios from 'axios'; import qs from 'qs'; Vue.prototype.$qs = qs;

在vue組件裏面請求方法

let postData = this.$qs.stringify({ key1:value1, key2:value2, key3:value3, }); this.$axios({ method: 'post', url:'url', data:postData }).then((res)=>{ });

 

 

這樣就ok了