axios中post传参方式

最近做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浏览器完全不兼容。

原文地址:https://www.cnblogs.com/liankong/p/9797863.html

时间: 2024-11-10 13:36:34

axios中post传参方式的相关文章

mock和axios常见的传参方式

第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两个参数,一个是path对象,一个是data对象. path想当于拼接在url地址上的参数, data是url后面的参数. 1.get请求 如果url后面有opts的参数,则说明他需要传递参数.要不就不用传递了,直接写个url就好了,不用拼接参数.(请看下图) 图一是接口 图二是调用了这个接口. 这个

Web API中的传参方式

在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete /Put的传参方式 一.Get传参 get设计成传输小数据,而且最好是不修改服务器的数据,所以浏览器一般都在地址栏里面可以看到,数据放在url的QueryString中. (一)简单类型 $(function () { $.ajax({ type: 'get', url:'http://localh

react中的传参方式

react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a name='a' age={16}/>,app) 在渲染的时候,直接给挂载的组件传参. 2,父子传参 父子传参可以用props和ref两种方式,1,props方式传参,父组件通过改变自己的参数并且通过props将状态传递给子组件,并在子组件中显示.2,通过ref传参,这种方式是通过子组件自己的方法改变自己的

C++中的传参方式

1.参数传递的概念 所谓参数传递就是用函数调用所给出的实参(实际参数)向函数定义所给出的形参(形式参数)设置初始值的过程. 在c++中,调用函数时有三种参数传递方式,分别为: (1)传值调用: (2)传址调用(即是传指针): (3)传引用: 总体上参数传递可以分为两类,由形参的类别决定:值调用与引用调用.除了定义为引用类型的形参外,其他类型的形参都是对应着值调用.指针传递也是值调用,只是它是值传递的是地址.下面对这三种参数传递方式进行详细的说明: 值传递: 值传递时,实参被拷贝了一份,然后在函数

vue请求中 post get传参方式是不同的哦

我在学习vue,项目中post请求,get请求都用到了,我发现传参方式是不一样的. post请求的例子: checkin (){ this.$http.post('my url',{ mobilePhone:this.phone, password:this.password },{ emulateJSON: true } ).then(function(res){ this.$root.userid=res.data.userid; console.log(this.$root.userid)

夺命雷公狗—angularjs—22—bind改指向和传参方式

在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js&qu

java 传参方式--值传递还是引用传递

java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用传递参数,以避免因依赖“按引用传递”这一行为而导致的常见编程错误. 对此节选的某些反馈意见认为,我把这一问题搞糊涂了,或者将它完全搞错了.许多不同意我的读者用 C++ 语言作为例子.因此,在此栏目中我将使用 C++ 和 Java 应用程序进一步阐明一些事实. 要点 读完所有的评论以后,问题终于明白了

Javaweb的七大传参方式和以及各自特点

学习jsp一段时间,觉得还是需要把自己学习一些东西整理了一下,第一次发东西,还请各位多多支持 1.表单提交 html自带的from方法,简单易懂,便于操作,依靠于<from>标签中的type="submit"进行表单传输,或者根据js进行控制提交表单.其中由method属性决定以post或者get方式进行提交. jsp代码: 1 <form id="test" action="testservlet" method="

SpringMVC的五种请求传参方式

1.传统传参方式 方法参数中使用request,通过request.getParameter("参数名"),再封装到bean中 @RequestMapping("/test01") public ModelAndView test01(HttpServletRequest request){ String username = request.getParameter("username"); String password = request.