关于vue+axios上传⽂件的踩坑分析
上传⽂件是每个前端开发者都会遇到的问题，在之前实习期做了⼀个上传⽂件的功能，当时没有彻底搞明⽩问题所在，现在重新复盘下。
1.使⽤formData来上传⽂件，没有使⽤axios上传⽂件，之前在学校有做过。⽣成⼀个formData对象
inputtypefile不上传文件
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⾝上
quest.use(
request => {
store.dispatch('httpStatus', { status: '', statusMsg: '' })
return request
},
error => {
ject(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原型上
  3.3 我导师给的⽅案，在action.js，axios的第三个参数config，加⼊⼀个transformRequest
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}]
}
关于这个⽅法我查了以下api，他是说 transformRequest 允许在向服务器发送前，修改请求数据，这个回调中可以对data进⾏修改，这样设置 config之后，问题就解决了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。