vue - resource 使用过程的坑

一. get 传参的坑:加params对象传参(不能直接get(url, params)!!!)

 this.$http.get(url, {params: { offset: this.offset, label: this.categray }})

二. 使用post请求:
知识点
post参数的形式 form data(表单,通过url传参) 和 request payload(JSON, 通过请求体传参)
这两个本质是发送交易的报文头中的Content-type,我们都知道一般发请求报文中的特殊字符比如+等都会被转码,那是因为默认的Content-Type用的是application/x-www-form-urlencoded,也就是form data这种情况,默认的报文都是这种格式的,但原生ajax就不是,原生ajax报文头用的是text/plain;charset=UTF-8,在这种格式下大部分字符都是不编码的。这种差异就会产生一些问题,比如我们碰到的这个post,就是用的第二种方式,所以那边接不到参数。思路也很简单,就是改报文头。

vue-resource 默认采用 request payload 形式即 JSON 数据,后台需要在 请求体 中获得参数

若后台需通过表单的方式(即在 url 中) 获得参数,有如下三种方案:

  1. 在vue实例中添加headers字段:
 http: {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
  1. 或者使用 vue 方面提供的更加简单做法:
  • 全局设置,在main.js中加上
  Vue.http.options.emulateJSON = true;
  • 局部设置,在方法上加三第三个参数
  this.$http.post('url', data, { emulateJSON: true })

三. 通过 POST 参数上传 (二进制)文件 时,请求参数需按一下步骤构建:

   //二进制文件必须通过formData.append()加入,并以formData作为请求参数,否则请求中参数将成 { }let formData = new FormData();formData.append('binary', binaryFile)formData.append('key', value);
   // 错误的示范,千万不要将formData包一层花括号,这会导致上传的值为{file: {}},也就是空值,这是一个陷阱this.$http.post(url, formData, { emulateJSON: true })

直接以input 获取的 file 对象作为POST 参数 会导致请求参数为 {} !!

FormData 类详细介绍

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/330279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

repo-关于URL编码

repost 4 http://www.ruanyifeng.com/blog/2010/02/url_encoding.html 一、问题的由来 URL就是网址,只要上网,就一定会用到。 一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。比如&#xff0c…

Spring零配置之@Configuration注解详解

转载自 Spring零配置之Configuration注解详解 Configuration介绍 Spring3.0之前要使用Spring必须要有一个xml配置文件,这也是Spring的核心文件,而Spring3.0之后可以不要配置文件了,通过注解Configuration完全搞定。 Configuration即用来代替S…

session实现购物车

1、是什么? session 可以存储会话级变量,基于其实现购物车; 2、为什么? session是会话级变量,可以吧多次请求的数据串联起来,放到会话里; 3、怎么做? 【荔枝】转自 张孝祥 登录…

commons-logging,log4j,logback,slf4j之间的关系详解

转载自 commons-logging,log4j,logback,slf4j之间的关系详解commons-logging是apache最早提供的日志的门面接口。它的主要作用是提供一个日志门面,使用者可以使用不同的日志实现。用户可以自由选择第三方的日志组件作为具体实现,像log4j,或者…

Vue代理配置

在 package.json 的同级目录(项目根目录)下创建 vue.config.js在 vue.config.js 写入下列内容 module.exports {devServer: {proxy: http://localhost:8080}}这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:40…

@Resource,@Autowired,@Inject3种注入方式详解

转载自 Resource,Autowired,Inject3种注入方式详解 概况 Resource,Autowired,Inject 这3种都是用来注入bean的,它们属于不同的程序中。 ANNOTATIONPACKAGESOURCEResourcejavax.annotationJava JSR-250Injectjavax.injectJava JSR-330Autowiredorg.springframework.b…

repost-微信小程序入门教程之一:初次上手

repost 4 http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html 微信是中国使用量最大的手机 App 之一,日活跃用户超过3亿,月活跃用户超过11亿(2019年底统计),市场极大。 2017年&#x…

Spring MVC : 概念模型 HandlerMethod(转载)

Spring MVC 应用启动时会搜集并分析每个 Web 控制器方法&#xff0c;从中提取对应的"<请求匹配条件,控制器方法>“映射关系&#xff0c;形成一个映射关系表保存在一个 RequestMappingHandlerMapping bean 中。然后在客户请求到达时&#xff0c;再使用 RequestMappin…

repo-话说软件详细设计工具

repost 4 https://blog.csdn.net/tang_huan_11/article/details/8043481 在软件设计是需要写软件详细说明书,设计此文档的时候,肯定少不了工具.现在我们就来了解一下软件详细设计的 工具. 1)程序流程图 程序流程图又称为程序框图,它是最古老,应用最广泛且最有争议描述详细设计的…

你必须了解Spring的生态

转载自 你必须了解Spring的生态 Spring不止是提供了IOC、AOP的功能&#xff0c;还提供了大量的基于Spring的项目&#xff0c;拿来用就行了&#xff0c;用于一站式开发&#xff0c;大大降低了开发的难度。 下面列举下主要的一些Spring的生态项目&#xff1a; Spring Boot&#…

Vue 使用 token

vue 解析 token 引入jwt-decode 包 npm install jwt-decode --save在 vue 中引入jwt-decode import jwtDecode from jwt-decodejs 中使用 const decode jwtDecode(token); console.log(decode);//解析后的对象vue-resource 设置请求头&#xff0c;带上token 第一种方法&a…

vmware安装centos6-步骤小结

【README】安装了很多次&#xff0c;但没有记录过&#xff0c;经常忘记&#xff0c;所以就记录一下 【1】 vm15 install centos8 at 2020/12/12 完成。

Ehcache介绍及整合Spring实现高速缓存

转载自 Ehcache介绍及整合Spring实现高速缓存 Ehcache介绍 EhCache 是一个纯Java的进程内缓存框架&#xff0c;具有快速、精干等特点&#xff0c;是Hibernate中默认的CacheProvider。它使用的是JVM的堆内存&#xff0c;超过内存可以设置缓存到磁盘&#xff0c;企业版的可以使用…

转:使用 Tkprof 分析 ORACLE 跟踪文件

【README】 昨天在验证oracle 数据库性能的时候&#xff0c;查询日志中 打出了 exec time , fetch time 不懂什么意思&#xff0c;所以就记录了下&#xff1b; A 表 680w&#xff0c; count 耗时5秒&#xff1b; B表 2013w&#xff0c; count 耗时10秒&#xff1b; A inne…

浅谈大型网站之负载均衡架构

转载自 浅谈大型网站之负载均衡架构 概念 负载均衡&#xff0c;英文名称为Load Balance&#xff0c;其意思就是分摊到多个操作单元上进行执行&#xff0c;例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等&#xff0c;从而共同完成工作任务。 负载均衡建立…

单词拆分

作者&#xff1a;xiao_ben_zhu 链接&#xff1a;https://leetcode-cn.com/problems/word-break/solution/shou-hui-tu-jie-san-chong-fang-fa-dfs-bfs-dong-tai/ 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 著作权归作者所有。商业转载请联系作者获得授权&#xff…

centos Error: Cannot find a valid baseurl for repo: base 解决方法

参考 https://arstech.net/centos-6-error-yumrepo-error-all-mirror-urls-are-not-using-ftp-http/ 【1】报错现场&#xff1b; 原因&#xff0c; 软件镜像地址有误&#xff0c;需要手工录入&#xff1b; 2、编辑文件&#xff0c; /etc/yum.repos.d/CentOS-Base.repo. 找到…

精选30道Java多线程面试题

转载自 精选30道Java多线程面试题 1、线程和进程的区别 2、实现线程有哪几种方式&#xff1f; 3、线程有哪几种状态&#xff1f;它们之间如何流转的&#xff1f; 4、线程中的start()和run()方法有什么区别&#xff1f; 5、怎么终止一个线程&#xff1f;如何优雅地终止线程&…

Vue 媒体处理(摄像头,截图,播放本地视频)

Vue 媒体处理&#xff08;摄像头&#xff0c;截图&#xff0c;播放本地视频&#xff09; 一. 打开摄像头 javascriptthis.constraint {// video属性设置video: {width: 300,height: 300,},// audio属性设置audio: true,}navigator.mediaDevices.getUserMedia(this.constrain…

how to install nc on centos8及nc应用

转自&#xff1a; https://linuxconfig.org/install-netcat-on-redhat-8 【README】 nc 是什么&#xff1f; nc&#xff0c;全名叫netcat&#xff0c;它可以用来完成很多的网络功能&#xff0c;譬如端口扫描、建立TCP/UDP连接&#xff0c;数据传输、网络调试等等&#xff0c…