axios 上传文件 封装_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拦截