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. 解决办法
