axios上传文件爬坑之路

这两天遇到一个奇葩的问题，项目中利用axios插件实现图片上传，其中axios插件已经封装成独立的文件，上传文件利用 new FormData进行提交，提交过程一波三折，坑之大，坡之陡足足浪费了我一天的时间终于搞好了。

一、先来说说坑是怎么挖的

axios的post封装图，这里的封装少了一个headers的参数，自行加上 post调用图，如果配置url域名端口号的地址，这里可以不用写

１　说说上传遇到的问题。这里利用FromData对象进行上传，都知道要设置headers中的content-type为multipart/form-data，结果在封装了配置了headers参数之后，请求头出现如下的样子：

看content-Type后边没有boundry

经过往上百度、谷歌等等一切方法，还是没有解决。因为请求头中没有boundry，有一篇博客说自行设置boundry。boundry是一个浏览器随机生成的一组数，用来分隔FormDatad的数据。在我设置之后变成了这样。

这里虽然形式正确，但还是上传失败。到这里已经半天过去了，此刻的内心崩溃到极点了。不行，在从官方文档开始。又回到了官方文档。

二、如释重负

网上找不到解决的办法，但给提供了一条思路，就是axios拦截了请求，对请求的数据做了一些处理，而FormData传输文件不需要任何的处理。所以就在想直接在axios上过载一个方法，躲过axios的拦截。凭着这个思路，又去看文档，发现文档中有一个创建实例(Creating an instance)的方法  axios.create([config]) 然后创建实例，过载Vue原型上，最终解决。到这里长舒一口气。

这里创建axios的实例，同时设置了url，响应时间，请求头 这里调用实例中post的方法，在全局设置请求头这里不用设置 上传成功的请求和响应头。

这里就上传成功。赶紧抬起头吸了一口新鲜空气。