最近做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传参方式的更多相关文章

  1. mock和axios常见的传参方式

    第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...

  2. react中的传参方式

    react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...

  3. Web API中的传参方式

    在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...

  4. java 中 Integer 传参方式的问题

    Java本身都是值传递式的调用,对于对象传递的是地址值.给地址值重新赋值等于重新指向,不会影响外层. 而且这里Integer对象也有特殊性.其实现上可能类似 class Integer{ final ...

  5. awk中传参方式

    结合编辑数据文件的shell脚本学习awk传参方式,该脚本功能: a.取VIDEOUSR_11082017_0102_ONLINE_STASTIC.dat文件中第87个字段的低8位: b.将每行数据的 ...

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

    在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ...

  7. 在Java中动态传参调用Python脚本

    最近,又接触到一个奇葩的接口,基于老板不断催促赶时间的情况下,在重写java接口和复用已有的python脚本的两条路中选择了后者,但是其实后者并没有好很多,因为我是一个对python的认识仅限于其名称 ...

  8. Python函数定义及传参方式

    主要内容:     1.函数初识     2.函数传参方式        (1)位置参数        (2)默认参数        (3)关键参数        (4)非固定传参 一.函数初识 1. ...

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

    java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用 ...

随机推荐

  1. sql基本

    SELECT: select * from table select 列名 from table select DISTINCT 列名 from table INSERT: insert into t ...

  2. Java自学笔记

    1.标识符:字母,数字,下划线,美元符组成,不可以已数字开头,并且严格区分大小写 2.变量 有三个元素描述变量,变量类型,变量名,变量值 如何命名变量:首字母为 字母:下划线:“$“符号,其余部分为 ...

  3. PHP 二维数组根据某个字段按指定排序方式排序

    /** * 二维数组根据某个字段按指定排序方式排序 * @param $arr array 二维数组 * @param $field string 指定字段 * @param int $sort_or ...

  4. Express全系列教程之(四):获取Post参数的两种方式

    一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...

  5. flask基础二

    内容有:1.配置文件处理,2.路由系统,3.视图,4.请求,5.响应,6.模板渲染,7.session,8.flash,9.中间件,10特殊装饰器 一:一个简单知识点 通过路径构成的字符串1.动态导入 ...

  6. ARM-linux与Ubuntu开发工具NFS及流程

    Linux虚拟机的型号是:Ubuntu 12.04 VMware:workstation 14 pro   author: Xianghai Ding Date:2019.01.04  板端:Hi35 ...

  7. Android数据库无缝升级方案

    软件迭代过程中,业务不断更新,也要求软件持续更新.相应地,数据库更新升级也是不可避免的一个环节.Android作为客户端应用,数据库升级相对于服务端来说会麻烦一些.常见的升级方式有: 1.删除旧表和数 ...

  8. 基于binlog恢复工具mysqlbinlog_flashback

    基于binlog恢复工具mysqlbinlog_flashback简介 mysqlbinlog_back.py 是在线读取row格式的mysqld的binlog,然后生成反向的sql语句的工具.一般用 ...

  9. DB_ObjectName_Define

    TABLE:Module_Object_Action eg:Finance_ProfitAdjust_Apply

  10. tp5命令行

    手册->命令行->自定义命令行 1.第一步,配置command.php文件 2.第二步,建立命令类文件 注意:该文件中代码,从文档中粘,以防写错. 名字啥的都不用改,就改命名空间 和 定义 ...