最近做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,這時服務器就不知道怎么解析數據了,所以才只能通過獲取原始數據流的方式來進行解析請求數據。
解決辦法:
一、URLSearchParams
1、在main.js里 設置配置,修改Content-Type
import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; Vue.prototype.$axios = axios;
2、在組件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瀏覽器完全不兼容。
二、使用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