关于vue+axios上传文件的踩坑分析

上传文件是每一个前端开发者都会遇到的问题，在以前实习期作了一个上传文件的功能，当时没有完全搞明白问题所在，如今从新复盘下。

1.使用formData来上传文件，没有使用axios上传文件，以前在学校有作过。生成一个formData对象

let formData = new FormData() formData.append('xxx', 'yyyyy')

经过dom操做得到input中file[0],而后append给formData对象，网上有详细的api

2.在使用axios以后发先我以前用的方法后台接受不到文件，问题是content-type是application/json，上传文件的时候使用的content-type应该是multipart/form-data才对。看了网上的一些理解，好像是说这个conten-type会在咱们上传文件的时候自动变为multipart/form-data，可是为何个人是json呢。问题的关键在axios身上

axios.interceptors.request.use( request => { store.dispatch('httpStatus', { status: '', statusMsg: '' }) return request }, error => { return Promise.reject(error) } )

axios对咱们的request作了一个拦截而后从新返回，这个时候咱们的formData会被变为一个Object，浏览器给出的是application/json，因此咱们的操做失败了

3.如何解决这个问题呢？

　　3.1咱们在咱们的action.js中修改axios的配置 

let config = { headers: { 'Content-Type': 'multipart/form-data' } }

结果固然仍是不行，怎么会这么容易就让我搞定呢！！！，后台报错 ---no multipart boundary was found，就是一个二级制的分隔符不见了，咱们能够手动添加一个

let config = { headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() } }

能够了，可是我仍是以为不是很好，应该咱们改动了headers里的东西，因而乎又看了我导师和网上的方法，一块儿贴出来。

　　3.2 建立新的axios实例，挂在在vue原型上

　　具体参考这篇文章https://www.jianshu.com/p/1405f389fb1d

　　3.3 我导师给的方案，在action.js，axios的第三个参数config，加入一个transformRequest

let config = { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [function (data) { return data }] }

关于这个方法我查了如下api，他是说 transformRequest 容许在向服务器发送前，修改请求数据，这个回调中能够对data进行修改，这样设置 config以后，问题就解决了