axios 使用post方式傳遞參數，后端接收不到

最近做vue項目，做圖片上傳的功能，使用get給后台發送數據，后台能收到，使用post給后台發送圖片信息的時候，
vue axios post請求發送圖片base64編碼給后台報錯HTTP 錯誤 414
請求一直報錯，顯示 request URI too large
后

 

台顯示一直沒有收到數據 參數為null。網上查看了很多資料，才知道axios post傳參的問題。

        this.axios.post( this.url_s+'/recipeController/findRecipe',{
            params:{
                 page: this.nums,
                 openId: localStorage.getItem("openId"), //this.$route.query.openId
                 hospitalId:localStorage.getItem("hospitalId")
            }
        }).then(res=>{
            Indicator.close()
            //this.$layer.close();
            if(res.data == 'no'){
              this.nodata = true;
            }else{
              this.lists = res.data;
              this.updatamore = true;
            }
        }).catch(err=>{
            Toast('加載失敗')
            Indicator.close()
        })

　　用post存在這個問題

一開始我是這么寫的 ，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)=>{ });

這樣就?了

以上這個方式是網上查詢的，實際我解決的是直接寫一個params對象，將要傳的參數添加到里面

 

　　　　 var params = new URLSearchParams();
        params.append('page', this.nums);       //你要傳給后台的參數值 key/value
        params.append('openId', localStorage.getItem("openId"));
        params.append('hospitalId', localStorage.getItem("hospitalId"));
        console.log(params)
        this.axios.post(this.url_s+'/recipeController/findRecipe',params).then(res=>{
            Indicator.close()
            //this.$layer.close();
            if(res.data == 'no'){
              this.nodata = true;
            }else{
              this.lists = res.data;
              this.updatamore = true;
            }
        }).catch(err=>{
            Toast('加載失敗')
            Indicator.close()
        })