axios把post的RequestPayload格式转为formdata

最新推荐文章于 2024-05-30 22:42:22 发布
最新推荐文章于 2024-05-30 22:42:22 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： vue 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeniusXYT/article/details/115249742
版权
前端 同时被 2 个专栏收录
34 篇文章 0 订阅
订阅专栏
vue
28 篇文章 1 订阅
订阅专栏

方法一：配置transformRequest，缺点：其他请求格式的数据也会被重新格式化（PUT，PATCH）

const service = axios.create({
    //设置axios为form-data 方法1
    // headers: {
    //     post: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //     },
    //     get: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //     }
    // },
        transformRequest: [function (data) {
        let request = ''
        for (let item in data) {
            if (data[item])
                request += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
        }
        return request.slice(0, request.length - 1)
    }]
})

方法二：添加请求拦截器，对症下药（推荐），所有主要浏览器都支持 encodeURIComponent() 函数

//添加请求拦截器
service.interceptors.request.use(
    config => {
        //设置axios为form-data 方法2
        if (config.method === 'post') {
            let data = ''
            for (let item in config.data) {
                if (config.data[item])
                    data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'
            }
            config.data = data.slice(0, data.length - 1)
        }
        return config;
    },
    error => {
        console.log("在request拦截器显示错误：", error.response)
        return Promise.reject(error);
    }
);

方法三：添加请求拦截器，使用axios 插件qs转换，可能存在兼容性问题

import qs from 'qs';
//添加请求拦截器
service.interceptors.request.use(
    config => {
        //设置axios为form-data 方法2
        if (config.method === 'post') {
            config.data = qs.stringify(config.data); // npm install axios qs --save
        }
        return config;
    },
    error => {
        console.log("在request拦截器显示错误：", error.response)
        return Promise.reject(error);
    }
);

完整代码：

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import Vue from "vue";
// import qs from 'qs';
let vue = new Vue()

// create an axios instance
const service = axios.create({
    // index.js设置了代理(解决跨域) api = XXX
    baseURL: "/api", // url = base url + request url
    timeout: 5000, // request timeout
    // headers: {
    //     Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    //     Cookie: "JSESSIONID=8F611FDFEBA4FA2A1891D5929F5E8682",
    //     "Upgrade-Insecure-Requests": 1,
    //     "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"
    // }
    //设置axios为form-data 方法1
    // headers: {
    //     post: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //     },
    //     get: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //     }
    // },
    // transformRequest: [function (data) {
    //     let request = ''
    //     for (let item in data) {
    //         if (data[item])
    //             request += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
    //     }
    //     return request.slice(0, request.length - 1)
    // }]
})

//添加请求拦截器，若token存在则在请求头中加token，不存在也继续请求
service.interceptors.request.use(
    config => {
        // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token
        // Authorization是必须的
        // if (store.getters.getToken) {
        //     config.headers.Authorization = store.getters.getToken;
        // }
        vue.$Loading.start()
        //设置axios为form-data 方法2
        if (config.method === 'post') {
            // config.data = qs.stringify(config.data); // npm install axios qs --save
            let data = ''
            for (let item in config.data) {
                if (config.data[item])
                    data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'
            }
            config.data = data.slice(0, data.length - 1)
        }
        return config;
    },
    error => {
        console.log("在request拦截器显示错误：", error.response)
        vue.$Loading.error()
        return Promise.reject(error);
    }
);

//respone拦截器
service.interceptors.response.use(
    response => {
        vue.$Loading.finish();
        // 在status正确的情况下，code不正确则返回对应的错误信息（后台自定义为200是正确，并且将错误信息写在message），正确则返回响应
        return response.data;
    },
    error => {
        vue.$Loading.error()
        // 在status不正确的情况下，判别status状态码给出对应响应
        if (error.response) {
            console.log("在respone拦截器显示错误：", error.response)
            switch (error.response.status) {
                case 401:
                    //可能是token过期，清除它
                    store.commit("delToken");

                    router.replace({ //跳转到登录页面
                        path: '/login',
                        // 将跳转的路由path作为参数，登录成功后跳转到该路由
                        query: { redirect: router.currentRoute.fullPath }
                    });
            }
        }
        return Promise.reject(error.response);
    }
);


export default service




// axios({
//     url:'/user',                            //  `url`是服务器链接，用来请求用
//     method:`get`,                           //  `method`是发起请求时的请求方法
//     baseURL:'http://some-domain.com/api/',  //  `baseURL`如果`url`不是绝对地址，那么将会加在其前面。当axios使用相对地址时这个设置非常方便
 
//     transformRequest:[function(data){       //  `transformRequest`允许请求的数据在传到服务器之前进行转化。只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法。数组中的最后一个函数必须返回一个字符串，一个`ArrayBuffer`,或者`Stream`
//         //依自己的需求对请求数据进行处理
//         return data;
//     }],
//     transformResponse:[function(data){      //  `transformResponse`允许返回的数据传入then/catch之前进行处理
//         //依需要对数据进行处理
//         return data;
//     }],  
//     headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定义的要被发送的头信息
//     params:{ //`params`是请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
//         ID:12345
//     },
//     paramsSerializer: function(params){//`paramsSerializer`是一个可选的函数，是用来序列化参数，例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
//         return Qs.stringify(params,{arrayFormat:'brackets'})
//     },
//     data:{//`data`是请求提需要设置的数据，只适用于应用的'PUT','POST','PATCH'，请求方法。当没有设置`transformRequest`时，必须是以下其中之一的类型（不可重复？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。仅浏览器：FormData,File,Blob。仅Node：Stream
//         firstName:'fred'
//     },
//     //`timeout`定义请求的时间，单位是毫秒。
//     //如果请求的时间超过这个设定时间，请求将会停止。
//     timeout:1000,
//     //`withCredentials`表明是否跨域请求，
//     //应该是用证书
//     withCredentials:false //默认值
//     //`adapter`适配器，允许自定义处理请求，这会使测试更简单。
//     //返回一个promise，并且提供验证返回（查看[response docs](#response-api)）
//     adapter:function(config){
//         /*...*/
//     },
//     //`auth`表明HTTP基础的认证应该被使用，并且提供证书。
//     //这个会设置一个`authorization` 头（header），并且覆盖你在header设置的Authorization头信息。
//     auth:{
//         username:'janedoe',
//         password:'s00pers3cret'
//     },
//     //`responsetype`表明服务器返回的数据类型，这些类型的设置应该是
//     //'arraybuffer','blob','document','json','text',stream'
//     responsetype:'json',
//     //`xsrfHeaderName` 是http头（header）的名字，并且该头携带xsrf的值
//     xrsfHeadername:'X-XSRF-TOKEN'，//默认值
//     //`onUploadProgress`允许处理上传过程的事件
//     onUploadProgress: function(progressEvent){
//         //本地过程事件发生时想做的事
//     },
//     //`onDownloadProgress`允许处理下载过程的事件
//     onDownloadProgress: function(progressEvent){
//         //下载过程中想做的事
//     },
//     //`maxContentLength` 定义http返回内容的最大容量
//     maxContentLength: 2000,
//     //`validateStatus` 定义promise的resolve和reject。
//     //http返回状态码，如果`validateStatus`返回true（或者设置成null/undefined），promise将会接受；其他的promise将会拒绝。
//     validateStatus: function(status){
//         return status >= 200 &;&; stauts < 300;//默认
//     },
//     //`httpAgent` 和 `httpsAgent`当产生一个http或者https请求时分别定义一个自定义的代理，在nodejs中。
//     //这个允许设置一些选选个，像是`keepAlive`--这个在默认中是没有开启的。
//     httpAgent: new http.Agent({keepAlive:treu}),
//     httpsAgent: new https.Agent({keepAlive:true}),
//     //`proxy`定义服务器的主机名字和端口号。
//     //`auth`表明HTTP基本认证应该跟`proxy`相连接，并且提供证书。
//     //这个将设置一个'Proxy-Authorization'头(header)，覆盖原先自定义的。
//     proxy:{
//         host:127.0.0.1,
//         port:9000,
//         auth:{
//             username:'cdd',
//             password:'123456'
//         }
//     },
//     //`cancelTaken` 定义一个取消，能够用来取消请求
//     //（查看 下面的Cancellation 的详细部分）
//     cancelToke: new CancelToken(function(cancel){
//     })
// });
aら　淼
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
发送请求的时候如何将Request Payload转换为Form Data格式
丑小鸭变黑天鹅的博客
02-25 3334
发送请求的时候如何将Request Payload转换为Form Data格式一、问题描述二、问题解决 一、问题描述 最近做项目遇到了一个问题，前端利用封装好的axios发一个请求给后端，请求可以发送成功，但拿不到正确的数据，在swagger上测试接口拿到的数据和在chorme控制台测试拿到的数据不一样，通过仔细比较，发现控制台payload下一个是Form Data，另一个是Request Payload，所以我想问题就在这里。 如下图，正确的方式 错误的方式 再看一下有问题的代码，只列举主要地方 看
axios 实现post请求时把对象obj数据转为formdata
10-16
今天小编就为大家分享一篇axios 实现post请求时把对象obj数据转为formdata，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
数据格式是Request Payload，而并非我们常用的Form Data格式，关于数据请求时候的格式转换
weixin_45379180的博客
02-14 244
问题： 这是由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理 解决1 下载 qs 模块 npm i qs https://blog.csdn.net/weixin_43268933/article/details/106655215 解决2 添加 header 设置 小程序的 header:{ 'Content-Type':'application/x-www-
Vue中使用Axios发送FormData请求
最新发布
牛肉胡辣汤
05-30 1339
通过使用Axios和FormData组合，我们可以在Vue项目中轻松发送包含文件或表单数据的请求。Axios提供了简单而强大的API来处理HTTP请求，而FormData提供了用于构建表单数据的API。这使得在Vue中实现文件上传和表单提交等功能变得非常容易。
前端传参Request Payload改为Form Data
m0_61585720的博客
08-29 390
【代码】前端传参Request Payload改为Form Data。
关于使用将axios的请求参数Request Payload格式修改为Form Data格式
zxzy
05-04 3335
关于使用axios如何设置formData提交数据欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导...
Request Payload 转 FormData
weixin_45999514的博客
11-27 519
import request from '@/utils/request' export function login(data) { return request({ url: '/admin/user/login', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: [
设置axios格式为form-data
江咏之
07-05 4221
最近在参与一个项目过程中遇到一个问题，相信大部分人都遇到过： 在后端与前端约定好application/json格式传递数据时，因为后台是go强类型语言，在定义api接口时，某些字段要求是整型类型，但是对于前端来说输入框或者从url中的search取到的参数都是字符串，不得不进行前端类型转换。 咋一看，对于接口参数比较少的api前端转换没有什么，但是对于一般的交互复杂，参数比较多的接口，要对大部分参数进行类型转换就是一种吃力不讨好的活。好在后端同学还支持另一种的前后端数据交互格式，即multipart/fo
axios post提交formdata的实例
08-27
axios Post 提交 FormData 的实例 在本文中，我们将探索 Axios.post 方法提交 FormData 的实例，并详细解释四种编码方式的差异和解决方法。 标题: Axios Post 提交 FormData 的实例 Axiso.post 方法 Axios.post ...
详解vue axios用post提交的数据格式
10-18
主要介绍了详解vue axios用post提交的数据格式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
axios中put的参数怎么传_axios的post传参时，将参数转为form表单格式
weixin_34410975的博客
12-23 480
import axios from 'axios';import alert from './alert.js';import Qs from 'qs' //引入qs 时axios的自带模块let env = process.env.NODE_ENV;let root = '';if (env === 'development') {console.log("api");} else if (...
使用axios发送post请求,将JSON数据改为form类型的示例
12-13
通常前端通过POST请求向服务器端提交数据格式有4中，分别是”application/x-www-form-urlencoded”格式、” multipart/form-data”格式、”application/json”格式和”text/xml”格式。通常最常见的是”application/json”格式，也就是通过JSON字符串形式。 在控制台看到的数据就是这样： 有的时候后台需要Form形式的数据才能正常解析，所以前端需要在传过去时修改一下格式。开始我以为是修改Content-Tyoe属性，于是就 axios.defaults.headers = { 'Content-type'
Request Payload 转为 Form Data
nico2333的博客
02-26 6081
最近学reatc写前端，从ajax改用axios，出现后端无法识别传输的数据类型的问题。 看了一下请求头，发现曾经的 Form Data 现在变成了 Request Payload。 此时的axios部分代码为以下： 经查阅，只需要在axios的配置选项中加入一行 headers: {'content-type': 'application/x-www-form...
axios的post请求obj数据转formdata
qq_34631220的博客
07-06 277
import axios from 'axios'; var myaxios = {}; myaxios.install = function(Vue){ var axios_obj = axios.create({ //支付接口 baseURL: 'http://www.dade.com:9000', transformRequest: [function (data) { let ret = '' .
Vue-resource中post请求将data数据以request payload转换为form data的形式
热门推荐
博客
04-14 1万+
这是当初我使用vue-resource中post请求时的一个坑，vue-resource中post发送的数据默认以request payload的形式，而一般我们使用的都是form data的形式。如何更改其形式只需要在main.js中写入以下代码：Vue.http.options.emulateJSON = true; Vue.http.options.headers = { 'Content
php使用axios发送请求,使用axios请求时,发送formData请求的示例
weixin_42531494的博客
03-29 874
使用axios请求时,发送formData请求的示例最近做的一个项目中有一个特例接口，传json后端接收不到，对接的后端又不愿意改接口，只能用formData方式传参，由于好多年没有用过formData，头痛了一会，找到了解决方法，发现非常简单，在此做个笔记！var formData = new FormData();formData.append("username", "Groucho");f...
vue使用axios中的post请求时, 如何将json数据改为formdata类型
木啊马
08-22 6421
有些时候在用ajax发送post请求时 ,数据如下图⬇️ 在使用axios时的默认请求如下图 ⬇️ content-Type : application/json 请求体类型默认是json格式 就连发送的数据也是 request payload 的 * 那么问题来了, 怎么才能让 axios 发送 post 请求时变得和 ajax 发送 post 请求的一样呢 ? 解决方法⬇️ 1. ...
axios请求requestBody和formData
qq_41662119的博客
11-15 1928
前言 在vue的后台管理开发中，应需求，需要对信息做一个校验，需要将参数传递两份过去，一份防止在body中，一份防止在formdata中，axios请求会默认将参数放在formdata中进行发送。 对前端而言其实都一样，无非就是参数的格式问题。 对后端而言 （form data）可以用request.getParameter(接收参数名) （request payload）...
解决axios报错400:Request Payload 转为 Form Data，并将对象内元素拆出
furfur-jiang的博客
04-29 649
问题：请求的数据格式与后台要求的不匹配 思路：axios对比用jq的请求是成功的 axios请求： jq请求： 首先发现Request Payload和Form Data不同 解决：增加请求头 this.$http({ method: "post", url: "/login/xxx", data: this.ruleForm, headers: { "content-type": "application/x-www-form-urlencoded" }, }).then((
axios 提交参数是json格式还是formdata格式
05-26
Axios可以同时支持JSON格式和FormData格式的参数提交。默认情况下，Axios会将JavaScript对象序列化为JSON格式的字符串，并使用Content-Type头将其发送到服务器。如果您需要使用FormData格式提交参数，可以使用FormData API手动创建FormData对象，并将其作为参数传递给axios的post方法。例如： ``` const formData = new FormData(); formData.append('username', 'John Doe'); formData.append('email', 'johndoe@example.com'); axios.post('/api/user', formData).then(response => { // 处理响应 }).catch(error => { // 处理错误 }); ``` 此外，您还可以使用`Content-Type`头将请求标记为`multipart/form-data`，这将告诉服务器接收到的数据是FormData格式的。例如： ``` const formData = new FormData(); formData.append('username', 'John Doe'); formData.append('email', 'johndoe@example.com'); axios.post('/api/user', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { // 处理响应 }).catch(error => { // 处理错误 }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值