最近做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. ubuntu安装elasticsearch

    0x00安装jdk ElasticSearch需要安装jdk1.8以上版本的支持,所以需要先安装jdk.linux下如何安装可以查看另一篇博客 0x01 下载elasticsearch 在es官网下载 ...

  2. Linux之使用mount挂载ISO镜像

    Liunx系统中如果不方便把ISO镜像放在CDROM中进行挂载可以把对应ISO镜像上传至主机使用mount命令挂载 系统环境查看 上传镜像后挂载 mount -o loop ubuntu-18.04. ...

  3. L1-016 查验身份证 (15 分)【考细心,考flag设置】

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  4. stm32入门学习路线个人见解

    可以说就目前的市场需求来看,stm32在单片机领域已经拥有了绝对的地位,51什么的已经过时了也只能拿来打基础了,最后依然会转到stm32来,也正是因为这样stm32的学习者越来越多,其中不难发现绝大部 ...

  5. Postgres数据库维护

    1.全自动备份 需要在备份机上也安装postgres(最好同一个版本) 在postgres目录下建立密码保存文件(明码保存,所以保密很重要),如果不建立,则因为每次备份都要输入密码,不能进行自动备份 ...

  6. Windows下安装使用python的Flask框架

    1.安装python环境: 这里就不赘述了. 2.安装virtualenv虚拟环境: 这里使用使用第三方工具 virtualenv 创建虚拟环境.虚拟环境的好处如下(摘录网络): “ 安装 Flask ...

  7. es5原型式继承间解

    1. 原型式继承方法 js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚. es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条: 子类继承父类,主 ...

  8. 如何成功安装旧版本火狐,成功安装firebug和firepath插件

    很久不用火狐了,为了练习selenium定位浏览器等操作,下载了火狐浏览器,新版火狐已经没有firebug和firepath等插件,无法使用,只有安装老版本的火狐:*****安装好之后立刻设置不让他自 ...

  9. Uva 12009 平方数尾数与自身同样 dfs 构造

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qq574857122/article/details/25166611 题目链接:点击打开链接 题意 ...

  10. CentOS7安装vsftpd3.0.2、以及虚拟用户配置

    vsftpd(very secure ftp daemon)是一款运行在Linux操作系统上的FTP服务程序,不仅完全开源而且免费,还具有很高的安全性.传输速度,以及支持虚拟用户验证. vsftpd ...