萌新用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)[/code]

 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--

如果跟这种形式不一样，恭喜你，代码有问题，改吧

阅读更多