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浏览器完全不兼容。
axios中post传参方式的更多相关文章
- mock和axios常见的传参方式
第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...
- react中的传参方式
react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...
- Web API中的传参方式
在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...
- java 中 Integer 传参方式的问题
Java本身都是值传递式的调用,对于对象传递的是地址值.给地址值重新赋值等于重新指向,不会影响外层. 而且这里Integer对象也有特殊性.其实现上可能类似 class Integer{ final ...
- awk中传参方式
结合编辑数据文件的shell脚本学习awk传参方式,该脚本功能: a.取VIDEOUSR_11082017_0102_ONLINE_STASTIC.dat文件中第87个字段的低8位: b.将每行数据的 ...
- 夺命雷公狗—angularjs—22—bind改指向和传参方式
在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ...
- 在Java中动态传参调用Python脚本
最近,又接触到一个奇葩的接口,基于老板不断催促赶时间的情况下,在重写java接口和复用已有的python脚本的两条路中选择了后者,但是其实后者并没有好很多,因为我是一个对python的认识仅限于其名称 ...
- Python函数定义及传参方式
主要内容: 1.函数初识 2.函数传参方式 (1)位置参数 (2)默认参数 (3)关键参数 (4)非固定传参 一.函数初识 1. ...
- java 传参方式--值传递还是引用传递
java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用 ...
随机推荐
- codecademy课程笔记——JavaScript Promise
Promise是一种表示异步操作最终的结果的对象,一个Promise对象有三种状态 Pending: 初始状态 ,操作还未完成 Fullfilled:操作成功完成,且这个promise现在有一个r ...
- popwindow+动画
布局: main: <Button android:id="@+id/btn" android:layout_width="match_parent" a ...
- 汇编入门——使用DOSBox写一个HelloWorld以及相关软件安装
0.0.0) 在D盘建立一个ASM文件夹 0.0.1) 放入所需要的文件 1所标示的红色框为必须要存在的文件,要处理汇编文件.百度网盘中下载. 2自己编写的汇编(asm)文件. 3编译汇编自己生成的文 ...
- 模块化Javascript代码的两种方式
1.将模块整体放在函数里 function buildMonthNameModule() { var names = ["January ", "February&quo ...
- nginx上通过ssl证书将http转发为https
环境:阿里云linux,ngnix 1.16.0 ,ssl证书,XXXX.jar 0.自行在阿里云上下载免费的ssl证书.里面有2个文件.key和pem后面要用到. 1.首先将项目在linux上跑起来 ...
- Ubuntu 安装YouCompleteMe
目录 材料 1,安装clang 2,安装YCM 使用Vundle安装 手动安装: 3,编译YCM,支持 C-family languages: 4,编辑vimrc YCM git repo https ...
- odoo按钮触发下载文件
测试环境:Odoo8.0 1.在你的模块中创建一个方法,返回url 举个例子, @api.multi def get_stock_file(self): return{'type':'ir.actio ...
- mysql GROUP_CONCAT 查询某个字段(查询结果默认逗号拼接)
Mysql 的 GROUP_CONCAT 函数默认将查询的结果用逗号拼接并返回一个字符串,如:李四,long,张三 1. 常用方式 select GROUP_CONCAT(user_name) use ...
- 创建一个vue项目()
1.打开cmd,选定路径 2. vue init webpack "项目名称“ 3.在项目路径下,安装一下项目依赖 cnpm install 4.运行 cnpm run dev 5.在浏 ...
- 11.全局变量(static)
1.数组 数组名是常量 2. 指针数组 4.局部变量 (1).作用域 作用的范围: (2).普通局部变量 在{}内定义: 只有执行到定义变量的这个语句,系统才会给这个变量分配空间. 当离开{},这个非 ...