萌新用vue + axios + formdata 上传文件的爬坑之路
最近项目要做文件上传，作为萌新表示这种操作有点鸭梨，知之为知之不知百度知，好吧百度说formdata 好那我们就动手了
首先照着formdata文档来先new 一个对象
let formData = new FormData()
formData.append('xxx', 'yyyyy')跑一遍没报错，好像是可以的，但是就是console直接打印是空的，看文档说要这么干：
console.log(formData.get('xxx'))
当然这个方法在低版本chrome低版本是没有用的，需要chrome 50+,我的是49，瞬间感觉自己考试成绩是59分有木有
算了不计较，FormData对象有了开始提请求了，去百度看别人怎么写的就复制粘贴了：
submitForm(event) {
let formData = new FormData()
formData.append('name', this.name)
formData.append('age', this.age)
formData.append('file', this.file)
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$http.post('/myupload', formData, config).then(function (res) {
if (res.status === 2000) {
/*这里做处理*/
}
})
}Emmm,乍看没啥问题，那就先跑呗，跑完发现问题来了:
后台开始报错（java后台）:
no multipart boundary was found
字面上来讲就是boundary 找不到了，回过头看我们的请求头好像确实没有，咋办，找资料呗,
找到一个分析http和boundary的博客https://blog.csdn.net/five3/article/details/7181521
想想boundary不就是一个随机生成的分割符嘛我加上一个随机数不就得了
let config = {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
}
}这么干不报错了，后台能通了，但是总感觉哪里不对，上传文件请求头有这么麻烦么，还要自定义boundary,身为程序猿总感觉有问题
再看资料 终于找到一个说的好的，地址暂时忘了存找不到了但大意是这样：
"自做聪明！！！，浏览器会自动判断类型给我们加上content-type ,自动加入的content-type里面就会有boundary",
嗯无形之中被大神嘲讽一波
算了，正事要紧，赶紧去了config再试
submitForm(event) {
let formData = new FormData()
formData.append('name', this.name)
formData.append('age', this.age)
formData.append('file', this.file) this.$http.post('/myupload', formData).then(function (res) {
if (res.status === 2000) {
/*这里做处理*/
}
})
}跑完发现后台接不到东西，调试器里面content-type居然是application/json
看着完全不对路的请求头，我感觉自己受到了暴击伤害，肯定哪里有问题！！
目前来看submit方法是一点毛病没有，只能去看axios对我的请求头干了啥，
去nodemodules里面看源码，也是没毛病，再去看看vue里axios配置文件,终于找到问题所在
由于业务需要，axios配置了拦截器，在里面做了数据处理
axios.interceptors.request.use(function (config) {
// 在发送请求之前做了坑爹的数据处理
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});这个数据把我们的数据类型变成了Object，so,浏览器给出的是application/json,
解决方案就是 重新creat一个纯净的axios请求，挂载到vue原型里，然后重新请求，这个时候发现请求成功，后台也接收到文件数据，完美！！
总结：网上代码不可全信，还是看文档释义好些，formData是个不一样的对象，需要纯净的,纯净的,纯净的(重要的事情说三遍)axios请求，最后贴出formdata的成功请求头
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyb1zYhTI38xpQxBK
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="city_id"
1
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="company_id"
2
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryyb1zYhTI38xpQxBK--