axios 使用post方式传递参数,后端接受不到

最近作vue项目,作图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,
vue axios post请求发送图片base64编码给后台报错HTTP 错误 414
请求一直报错,显示 request URI too large
后台显示一直没有收到数据 参数为null。网上查看了不少资料,才知道axios post传参的问题。vue

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

})
一开始我是这么写的 ,post里面的数据放在params里面,这样是有问题的,在使用axios时,要注意到配置选项中包含params和data二者,觉得他们是相同的,实则否则。
由于params是添加到url的请求字符串中的,用于get请求。
而data是添加到请求体(body)中的, 用于post请求。ios

而后我把params改成了data,后台仍是接收不到,查阅了不少资料,须要把Content-Type为application/x-www-form-urlencoded,
jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,因此服务器可以正确解析,而使用原生ajax、axios请求时,若是不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了,因此才只能经过获取原始数据流的方式来进行解析请求数据。ajax

解决办法:axios

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浏览器彻底不兼容。app


2、使用qs
安装qs,在 main.js里引入ide

import axios from 'axios';
import qs from 'qs';
Vue.prototype.$qs = qs;
在vue组件里面请求方法post

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

相关文章
相关标签/搜索