上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下。
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之后,问题就解决了