axios+post+qs 改变上传数据格式

最新推荐文章于 2022-09-02 00:32:15 发布

qq_44904590

最新推荐文章于 2022-09-02 00:32:15 发布

阅读量304

点赞数

分类专栏：项目踩坑文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_44904590/article/details/115448074

版权

axios+post+qs 改变数据格式上传

背景

在写项目的时候,有常见的注册登录操作<这是大家都晓得的常识>,然后我就是在写这些简单的东西上,踩坑了.注册成了,登录数据也是传正确了的,但是始终登录不成功.
配上两个图,看上去清晰一些: 一个是注册成功,一个是登录失败.
注册成功截图
登录失败截图

失败原因

后端要求的application/x-www-form-urlencoded格式,但是axios.$post方法默认的是application/json编码格式,然后后端解析不了.所以一直无法登陆成功!

解决办法

下载qs npm i qs
导入qs import qs from 'qs
在post方法中使用qs.stringify() 改变数据的编码格式,这里是把axios.$post默认的json格式改成application/x-www-form-urlencoded格式.
上代码:

// An highlighted block
this

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_44904590

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react Hooks+axios+antd+TypeScript，简单实现接口请求loading效果

北冥の魚

05-27

408

文件后缀为tsx 发送请求时showLoading(), 请求失败hideLoading() import ReactDOM from 'react-dom'; import axios from 'axios'; import Qs from "qs"; import {Spin} from "antd"; const Axios = (url:string,method:any='get',params:{}={}, isAuth:boolean=false)=>{ const Base

axios 封装上传文件的请求方法

10-17

今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1 条评论您还未登录，请先登录后发表或查看评论

axios的post请求使用qs

zebrato的博客

08-18

1040

axios的post请求使用qs npm 命令 npm i vue-axios-qs 用法 qs.parse:可以把字符串转化为对象格式 let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'; let data = qs.parse(url.split('?')[1]); qs.stringify:可以把对象转化为字符串 let params = { c: 'b', a: 'd' }; qs.str

vue axios qs 正确提交数据姿势

Orange软件的博客

11-24

9330

先说明一下经历吧需求：有些时候使用application/x-www-form-urlencoded，也就是大家在项目经常用到的一种提交格式有些时候使用application/json提交数据，也很常用本人在开发过程中呢一般使用application/x-www-form-urlencoded格式提交数据来查询使用application/json格式来增加数据和修改数据 (不知道这两种...

vue使用axios上传文件(FormData)的方法

12-08

在此主要介绍如何使用 formData 对象上传单文件和多文件，FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。过多介绍不说，过多的煽情语句不说，直接来来干活，希望对广大博友有所帮助。也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数  <form> <input type="text" value="" v-model="name" placeholder="请输入用户名"> <input type="text" value="" v-mod

axios 传数组或对象格式的参数

pink_grape的博客

07-26

348

解决方案： 1、直接让后端改请求方式，改成POST，简单暴力！ 2、修改GET传参的数据格式： qs.stringify({ids: [1, 2, 3]}, { indices: false }) //形式： ids=1&ids=2&id=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'indices'}) //形式： ids[0]=1&aids1]=2&ids[2]=3 qs.stringify({ids: [1, 2,

使用axios发送post请求,将JSON数据改为form类型的示例

10-16

3. 使用qs库进行数据格式转换：虽然设置了请求头，但axios默认不会将JSON数据自动转换为URL编码的表单数据。为了实现转换，需要用到qs库（querystring的扩展），该库可以将对象序列化为URL编码的查询字符串。 4. ...

vue+axios+promise实际开发用法详解

12-11

5. **请求和响应转换**：可以自定义转换请求体和响应体的数据格式。 6. **取消请求**：提供了一个机制来取消尚未完成的请求。 7. **自动 JSON 转换**：对于 JSON 数据，`axios` 会自动将其序列化。 8. **XSRF 防御**...

axios+qs简单实现post请求form-data格式

Mrbignose的博客

07-04

1657

axios+qs简单实现post请求form-data格式有的时候后台接口以form-data的格式来接收参数，那么默认的写法后台是拿不到参数的，这个时候前端必须得以form-data的格式来传递核心知识 1.引入qs npm install -save qs #or <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script> qs官网地址 2.引入axios npm

qs框架快速将JSON格式转换为FormData格式

weixin_71583566的博客

09-02

2290

qs框架快速将JSON格式转换为FormData格式

Vue.cli3使用axios中post向后台传数组包对象类型参数(qs篇)

wupinlong的博客

08-05

2834

1问题向后端传数组包对象类型的参数(下面图片为例子) 解决我们改怎么解决呢？首先我们定义一个跟后台要接收的参数名一样的变量名然后对这个变量名qs处理一下 // 点击提交 handleUpTo() { let ldinfo = this.ruleForm.ldinfo console.log(ldinfo) //这里是上面的那些值 let self = this Qs.stringify({ ldinfo: ldinfo }, { array.

qs 数组格式

qq_32439381的博客

08-12

2072

前言：因为和后台对接，传数组的时候格式都不是后台想要的，记录一下一、概念 qs.stringify()作用是将对象或者数组序列化成URL的格式二、数组格式 1. 默认方括号 export function addScene(data) { return request({ url: '/cemsys/scene/addScene', m...

Vue axios模拟表单POST请求 Qs使用教程

Wjhsmart的博客

01-03

5581

1、安装Qs依赖 npm install qs 2、js中引用Qs import Qs from 'qs' 3、构造数据 var formData = Qs.stringify({ username:'test', password:'123456' }); 4、使用数据 axios.request({ url: '/auth/login',...

axios模拟表单POST请求使用qs

w1213096890的博客

03-15

1万+

怎么模拟怎么不对，都没法构造出表单的请求体解决方案：前端使用qs插件构建1.安装qs:cnpm install qs2.引用模块import Qs from 'qs'3.构造数据var da1 = Qs.stringify({ method:'value',});4.填入数据即可axios({ url:'/api/xxxxx/xxxx.xxx', method:'post', d...

axios的post请求为什么要使用qs

苦夏木禾

04-22

4311

结论：用不用取决于后端怎么接收参数 axios默认的content-type是application/json,即json格式，后台可以使用字符串进行接收，然后再解析即可以PHP接收为例 1、如果以request()->put()orfile_get_contents('php://input')接收json格式 // 方法1 // $data = request()->put(); // echo json_encode($data); // 方法2 $data = file

vue上传文件的坑

Yanfengting的博客

04-03

8064

在这个地方浪费了我两天时间，必须总结一下经验 <input multiple type="file" ref="file" id="uploadFile" @change="aaa($event)"> aaa(e) { console.log('e.target.files') console.log(e.target.files) }, 这是第一种...

axios 实现文件上传

木流沙的博客

12-19

5万+

在一次使用axios中实现文件上传时遇到一个问题。觉得对于上传这方面还不是很了解，就决定好好了解一下这方面的知识。首先列出问题：我使用的是FormData实现的上传，因为移动端浏览器版本一般比较高，所以不考虑兼容性问题。代码是这样的： changefile(file){ var forms = new FormData() var configs = { headers:{...

使用axios发送post请求，将JSON数据改为为form类型

qq_32615575的博客

07-19

1331

通常前端通过POST请求向服务器端提交数据格式有4中，分别是"application/x-www-form-urlencoded"格式、" multipart/form-data"格式、"application/json"格式和"text/xml"格式。通常最常见的是"application/json"格式，也就是通过JSON字符串形式。在控制台看到的数据就是这样有的时候后台需要Form形式...

vue之element-ui文件上传