vue 使用qs向后端传递表单FormData参数

最新推荐文章于 2024-08-02 17:06:40 发布

笑笑的微笑

最新推荐文章于 2024-08-02 17:06:40 发布

阅读量7.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/pz3305636904/article/details/103359522

版权

本文介绍了在Vue项目中，结合axios和qs库，如何将表单数据以application/x-www-form-urlencoded格式发送到SpringBoot后端的方法。首先需要引入axios和qs库，然后设置请求头为application/x-www-form-urlencoded，最后通过qs.stringify()转换并发送FormData数据。

摘要由CSDN通过智能技术生成

axois_qs 使用表单传参

在使用vue+elementUI搭建了登录页面之后，想和后端的Springboot对接一下；对接的vue-cli配置研究一番再写笔记；总所周知，再前后端对接的时候，后端接收的一般就是字符串，直接返回json字符串；而前端内，最好选择表单字段，也就是applicaton/x-www-form-urlencoded格式，这种后端最好接收。

那么，如何使用？

引入axios和qs

//axios是官方推荐前端发送请求的方式，虽然你也可以用jsonp,但我没用过
cnpm axios vue-axios --save

//qs.stringify()序列化后的结果是a=a&b=b；而JSON.stringify()/得结果是{'a':a,'b':b}

请求头要用application/x-www-form-ulrencoded，这样才能发送FormData格式的数据，代码如下：

//必须引入这两货
import qs from 'qs'
import axios from 'axios';

async accountLoginUrl(){
    console.log('accountLoginUrl')
    let result =  this.$axios({
        method: 'post',
        url: &