这两天遇到一个奇葩的问题,项目中利用axios插件实现图片上传,其中axios插件已经封装成独立的文件,上传文件利用 new FormData进行提交,提交过程一波三折,坑之大,坡之陡足足浪费了我一天的时间终于搞好了。
一、先来说说坑是怎么挖的
1 说说上传遇到的问题。这里利用FromData对象进行上传,都知道要设置headers中的content-type为multipart/form-data,结果在封装了配置了headers参数之后,请求头出现如下的样子:
经过往上百度、谷歌等等一切方法,还是没有解决。因为请求头中没有boundry,有一篇博客说自行设置boundry。boundry是一个浏览器随机生成的一组数,用来分隔FormDatad的数据。在我设置之后变成了这样。
这里虽然形式正确,但还是上传失败。到这里已经半天过去了,此刻的内心崩溃到极点了。不行,在从官方文档开始。又回到了官方文档。
二、如释重负
网上找不到解决的办法,但给提供了一条思路,就是axios拦截了请求,对请求的数据做了一些处理,而FormData传输文件不需要任何的处理。所以就在想直接在axios上过载一个方法,躲过axios的拦截。凭着这个思路,又去看文档,发现文档中有一个创建实例(Creating an instance)的方法 axios.create([config]) 然后创建实例,过载Vue原型上,最终解决。到这里长舒一口气。
这里就上传成功。赶紧抬起头吸了一口新鲜空气。