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，这时服务器就不知道怎么解析数据了，因此才只能经过获取原始数据流的方式来进行解析请求数据。

解决办法：

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)=>{ });

这样就?了

以上这个方式是网上查询的，实际我解决的是直接写一个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()
        })