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

关于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之后，问题就解决了