木灵鱼儿
阅读:3235
精华 axios 修改http协议和转formData对象
修改协议
最近发现axios的修改协议有个很方便的操作,就是通过create创建一个axios对象的时候,就可以直接设置上传协议了。
const api = axios.create({
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
});
这样我们将协议改为了application/x-www-form-urlencoded
这个协议可以上传formData对象,但是他不能上传文件,所以如果你要上传文件,需要改为这个协议:multipart/form-data
如果默认配置无法满足,你可以使用官方提供的这种方式改写头信息
api({
url:"xxxx",
data:xxxx,
headers:{
'Content-Type': 'multipart/form-data'
}
})
这样我们就可以覆盖默认的头信息设置了。
转formData对象
formData对象在不同协议下转换的方法是不一样的,这里说两种最常用的请求协议:
纯文本的协议转换方法
比如axios官方默认的:application/json
前端网页form表单的默认协议: application/x-www-form-urlencoded
我百度出两种方法,第一种他虽然能转换成功,但是他会有一个多余的(empty),所以并不完美,所以就不多说了,我这里讲一下比较完美的方案
我们需要一个拦截器,你可以设置一个针对你某个api路径的,也可以全局的,我这里设置一个全局的
import qs from "qs";
api.interceptors.request.use(config => {
config.data = config.data ? qs.stringify(config.data) : null; //转为formdata数据
return config;
}, error => {
console.log(error);
Promise.reject(error);
});
使用该方法转换的formData十分完美,为此我们需要引入一个qs对象,这个对象,你安装了axios他就有的,qs是axios一起带来的,所以不需要单独安装。
传文件的转换
这个就很大的坑了,我之前以为qs是通杀的,所以导致前端传文件,后端总是拿不到,我还以为后端限制文件大小的方法失效了,查了一晚上,头发都薅了不知道多少,无知导致光头,我草了。。。
axios传文件,协议必须是multipart/form-data
如果后端能设置的话,其实也不一定非要formData对象才能传数据,axios里面传{}
对象的形式也是可以的。
但是我用node+koa搭建的时候,使用的是koa-better-body中间件,他传文件只能用formData,否则获取不到文件。
所以必须要转成formData格式
而qs的转换,在multipart/form-data
协议下,他的转换形成的是一个序列化字符串。
我尝试在application/x-www-form-urlencoded
和application/json
协议下输出qs转换的内容,他确实也是一个序列化字符串。
什么是序列化字符串?
实际就是转换成get传参的那种键值对形式的字符串:key=val&key=val&...
所以我推测,axios会根据使用的协议,默认转换这种字符串为formData对象,或者是一个自动转换的功能啥的,不依赖axios,反正使用qs,在之前所说的的两种协议中,是可以正确发送formData对象的。
但是就是multipart/form-data
协议下,即便qs转换了,也是不行的,没有用,哪怕你发送的是纯文本,只要是这个协议,就是不会自动转换为formData。
所以我们需要手动转换,方法也很简单,注意1点就行了。
首先就是不支持FileList对象的直接转换formData对象!!!
不支持FileList对象的直接转换formData对象!!!
不支持FileList对象的直接转换formData对象!!!
重要的事情要说三遍。
文件也分多文件和单文件之分,先挑简单的单文件转换来说
单文件转换
//请求之前拦截器
api.interceptors.request.use(config => {
//单文件转换formData
if (config.headers["Content-Type"] === "multipart/form-data") {
let form = new FormData();
for (let key in config.data) {
form.append(key, config.data[key]);
}
}
return config;
}, error => {
console.log(error);
Promise.reject(error);
});
判断是不是multipart/form-data
协议,是的话就进行formData转换,但是这里就需要注意,不要直接把FileList对象直接丢到要传的参数里面,所以,传参前需要这样处理。
axios.post({
file: file_list[0], //直接传FileList里面的文件
})
file_list等于你input元素change事件的event.target.files
的值,不会傻到照抄把,我这只是简写示例。
这样文件的传输就没问题了。
多文件转换
多文件的转换,为了方便,肯定是直接把FileList对象丢进来了,所以我们的拦截器就需要进行判断了,如果是这个对象的话我们需要进行调整。
这里我们就需要判断这个对象object是不是FileList,那么我们就需要衍生的讲讲另一个知识点:js如何准确判断对象的类型
这里我们拿vue的源码来说一下,非常经典:
var _toString = Object.prototype.toString;
function toRawType(value) {
return _toString.call(value).slice(8, -1)
}
Object.prototype.toString.call([])
返回的是:[object Array]
字符串,不管是什么类型,文字啊,数组啊,布尔啊,等等这些,返回的格式都是这样的:[object xxxxx]
所以使用string的slice方法截取,从第8个字符的左边开始(0位开始算),到最后-1位,也就是最后那个减去1位,刚好把其他的字符都去掉了,留下表示对象格式的文本。
然后我们就可以通过这个进行判断
//请求之前拦截器
api.interceptors.request.use(config => {
//多文件转换formData
if (config.headers["Content-Type"] === "multipart/form-data") {
let form = new FormData();
for (let key in config.data) {
if (Object.prototype.toString.call(config.data[key]).slice(8, -1).toLowerCase() === "filelist") {
config.data[key].forEach(f => {
form.append(key, f);
});
} else {
form.append(key, config.data[key]);
}
}
}
return config;
}, error => {
console.log(error);
Promise.reject(error);
});
formData对同一个key值重复写,他并不会覆盖之前的值,而是进行追加,并且结果类似于arr.push()的效果。
这样一写,你发现对于单文件也是完美兼容的,就是多了几行代码,所以个人更推荐使用这个,当然,对于判断对象类型的,你也可以封装成一个通用方法,然后使用。(vue源码那种写法性能更好一些,我这边省事而已)
以上就是关于转换formData方法的总结了,应该不会有问题了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
封装uni.request api为类似axios的用法
前言uniapp的请求都是通过uni.request的api实现的,但是这个api和前端常用的axios库用法上有着太多的不同了,移植起来非常痛苦,所以萌生了自己造一个轮子的想法,由于本人技术菜鸡,只能浅浅的仿照一个了。实际上本人喜欢axios的config的方式调用请求,如下:axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });所以大体上都是围绕这种用法展开工作的。首先说下使用上...
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...
