在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的:
https://www.kancloud.cn/luponu/axios/873153
文档中的 使用 application/x-www-form-urlencoded format 这一部分讲的就是 通过axios发送 FromData 的方法,
下面是我在vue项目中使用的示例:
在本组件的method添加了一个点击事件,点击了发送 FromData 格式的 post请求。
<template>
<div class="login"> <div>
<div class="login_input"><input type="text" v-model="tel" placeholder="请输入手机号" autocomplete="false"><button class="auth-code-btn" @click="getAuthCode">获取验证码</button></div> <div class="login_input"><input type="text" v-model="msg" placeholder="请输入验证码" autocomplete="false"></div>
</div>
<div class="login_btn" @click.stop="login">登录</div>
</div> </template> <script>
import Header from '../components/Header'; /*
我们想通过axios 提交FromData,需要用到qs库(这个库不用npm下载,直接引用即可),
qs是一个url参数转化(parse和stringify)的js库。
qs.stringify() 和JSON.stringify() 作用相似,都是序列化,但他们完全不是一个东西,
假设我要提交的数据是: let a = {name:'hehe',age:10};
qs.stringify(a)序列化结果为 name=hehe&age=10
而JSON.stringify序列化结果为: {"name":"hehe","age":10} 转成字符串 使用 application/x-www-form-urlencoded format 使用这种请求头 发送法数据就是 FromData格式
默认情况下,axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。
这里我们是采用的ES6 语法 引入 的qs模块
*/
import qs from 'qs'; export default {
name: "Login",
components: {Header},
data(){
return {
tel: '',
msg: ''
}
}, methods: { //获取验证码
async getAuthCode(){
// console.log('sss');
// let data = await this.$http.post('https://i.meituan.com/account/custom/mobilelogincode2' + '?mobile=17664068406');
//直接post请求及传参数
// let data = await this.$http.post('https://i.meituan.com/account/custom/mobilelogincode2', { mobile: '17664068406'});
// console.log(data); //通过POST方式发送FormData格式的参数 的写法
let data = await this.$http({//这里的 this.$http 就是axios 因为 我在vue原型上,挂载axios的时候,把axios改名为$http 了。
url: 'https://i.meituan.com/account/custom/mobilelogincode2', //请求路径(接口)
method: 'POST', //请求方式
headers: { 'content-type': 'application/x-www-form-urlencoded' }, // 请求头,发送FormData格式的数据,必须是 这种请求头。
data: qs.stringify({mobile: '17664068406'}), //发送请求要传的FormData参数。必须用 qs.stringify()序列化一下。
}); console.log(data); } } }
上面的this.$http 就是axios 因为 我在vue原型上,挂载axios的时候,把axios改名为$http 了。 我挂载的方法,可以看 https://www.cnblogs.com/taohuaya/p/10177967.html 这篇博客,有一个地方提到了。
下面我们看一下效果:
请求时发送的信息:
返回的数据:
搞定了,结束。
在vue项目中使用axios发送FormData的更多相关文章
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- vue项目中关于axios的简单使用
axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- 在vue项目中使用axios
安装 cnpm i axios --save-dev 在项目main.js中全局引用 import axios from "axios" Vue.prototype.$http=a ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- vue项目中使用axios上传图片等文件
form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue项目中 axios 和Vue-axios的关系
文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码: 今天看到有些项目是这样写的,就有点看不懂了. ----解 ...
随机推荐
- I - Magic FZU - 2280 (字符串hash)
题目链接: I - Magic FZU - 2280 学习链接: FZU - 2280 I - Magic 题目大意: 给你nn个字符串,每个字符串有一个值ww,有qq次询问,一共两种操作:一是“1, ...
- Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields(翻译)
0 - Abstract 我们提出了一种方法去在一张图片中有效地识别多个人体的2D姿势.这个方法使用了一个无参数表示法,我们将其叫为Part Affinity Fields(PAFs),其是去在图片中 ...
- apache基础学习
1,apache是什么? 目前最主流的三个Web服务器是Apache Nginx IIS 2,环境搭建 linux系统安装xampp: 先下载xampp for linux,放在/opt文件夹下,程序 ...
- MyBatis-Plus的简单使用
mybatis-plus也只是听过,可是终究没有使用过.于是自己花几天晚上的时间研究mybatis-plus的使用. 下面的研究也是基于其官网:http://mp.baomidou.com/guide ...
- HBSX2019 3月训练
Day 1 3月有31天废话 今天先颓过了就只剩30天了 初步计划 每天一道字符串/数据结构题 图论学习 根据<若干图论模型探讨>(lyd)复习 二分图与网络流学习 <算法竞赛进阶指 ...
- 海马玩模拟器——搭建React Native环境
Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下! 下面开始配置环境: 1)下载1.8+JDK,配置JDK环境参考 ...
- 空串、null串和isEmpty方法
空串 空串""是长度为0的字符串.可以调用以下代码检查字符串是否为空: if(str.length() == 0) 或 if(str.equals("")) 空 ...
- Mac下更改JDK环境变量配置
1.打开终端 2.如果你是第一次配置环境变量,可以使用“touch .bash_profile” 创建一个.bash_profile的隐藏配置文件(如果你是为编辑已存在的配置文件,则使用"o ...
- mysql5.7 闪回数据(update delete insert)
本次测试用Myflash闪回dml操作,有个前提条件是log_bin开启并且log模式是row: mysql> show global variables like "binlog%& ...
- HDU 4549
水题: 费马小定理+快速幂+矩阵快速幂 (第一次用到费马小定理) #include<bits/stdc++.h> using namespace std; typedef long lon ...