axios文件上传的坑

基本的axios配置这里就不讲了。首先要确认后台的接口是否正常:用postman进行文件上传,若是文件可以上传成功,剩下的就是前端问题了,不然就先用postman将后台接口测通先。很难受这篇文章的结论是:本身的代码坑了本身前端

1. 文件上传时候,服务器报500错误

首先确认:经过formData上传,不用考虑enctype,axios发送请求,嗯,后台还要是通的

正常来讲文件上传的时候,都是须要修改请求的Content-Type,修改成multipart/form-data来实现文件上传的功能

可是如今很神奇的报了个500错误ios


看到报错以后,上网找了一大堆资料(重复内容一大堆,还一堆没有用的内容。。。) 仍是没有解决问题。axios

1.1 网上的解决办法

网上的一种说法:axios配置不纯净,须要本身手动建立一个axios请求。

可是建立了以后发现请求头一直都是application/x-www-form-urlencoded(axios源码中,若是没有设置请求头的时候,axios会默认设置这个Content-Type),会致使文件没有办法上传,或者是上传以后文件是null的。后端

1.2 更加野的办法

在上面那个报错的截图中看到服务器是报没有boundary的错误,查了一下资料发现这个是浏览器进行分割文件时须要到的分割符,野方法就是直接手动添加一个boundary在multipart/form-data的后面。可是很无奈,发现服务器换了个报错415,显示当前的请求为不支持的媒体类型。浏览器

2 axios的配置

目前能够确定报错就是由于发送请求时候的请求头错误,致使后端就收不到文件。百度到了一个很关键:发送文件的时候不可以手动设置multipart/form-data,须要浏览器来自行设置这个请求头,服务器

2.1 axios配置

理论上axios的配置应该没有那么蠢,没有考虑到axios须要发送formData格式的内容。正好最近一直研究在axios的源码内容,不当心被我看到了一个有趣的内容app


看到没有,在axios源码里面就写着,若是当前的请求内容是formData格式时候,就将Content-Type删除,也就是删除掉了multipart/form-data这个请求头。并且人家后面还写着备注说,让浏览器来继续设置这个值。终于找到了关键的地方,在这个判断前打印了一下requestData的值,结果发现是空的。继续去查看这个requestData值的内容post


找了这个对请求数据进行装载的地方,在装载先后打印了内容发现,装载了以后内容都被清空了,也就致使了后面判断是否为一个formData对象时候直接判断为false就没法删除Conten-Type了。url


这个地方就是咱们本身对发送请求时候请求数据的修改,也就影响了上面装载数据的处理,能够看到若是是multipart/form-data时候,数据直接就被Qs进行序列化了,由于没法序列化FormData的内容,因此返回的data就是一个空的内容,致使最后判断是否是formData对象时出错spa

3. 解决办法