今儿在调上传文件的接口时发现一个很奇怪的问题,上传用的是element-UI的upload组件,该组件有一个参数 action 用来设置上传服务器的地址,一开始是这样使用的:
组件引入:

在js 中如下设置:

然后在本地做了代理,通过‘api’ 将接口转发。这种情况下实现的很完美。但是后来部署的时候出了点问题,不方便nginx上配代理,所以接口会报错。
这种情况下想到了官网的例子:

然后在js中将接口地址前面的部分补全,可是,,不行,,竟然会跨域【汗】
怎么办呢?后来想到一个办法,form上传是没有跨域问题的,于是我又这么干:

这个是写在upload组件brfore-upload上的,最后return false 是为了阻止下边流程的进行,把upload组件下边要做的文件上传和文件上传成功之后的操作接过来。
此时上传虽然没有了跨域,但是,,但是接口还是没成功,为撒呢?看下请求参数,空空如也(我懵懵懂懂过了一年~)
正常应该是这样:

OK,再看请求头竟然是application/json ....what? [尼克杨问号脸]
想想难道是,,啊,,忘记设置请求头了,于是这样:

what?还不行,裤子嘛来打你信不信?这个header躺着改也不行,坐着改也不行,什么姿势都不行,于是跟网上查了下,看源码发现了坑人的地荒。

瞧瞧瞧瞧,这是人干的事儿么,,如果参数是formData 就把content-type删除让浏览器自己看着办。
重点来了,解决办法:
自己创建一个纯净的axios:

再去在上传文件的地方引用,就大功告成了!!!