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

 

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

上一篇:nodejs.cn-Node.js-入门教程:使用 Node.js 输出到命令行


下一篇:iOS布局相关