最近做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，具体也没看懂是什么，总之知道就是参数格式不对，查阅资料找到两种解决办法，代码如下：
解决办法：
一、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了
如果觉得《axios post封装对象到后端_axios 使用post方式传递参数 后端接受不到》对你有帮助，请点赞、收藏，并留下你的观点哦！
