一、背景
最近在开发过程中，遇到的需要是需要上传高清图片，必须原图上传。由于在移动端应用，上传网络问题有很大的坑。当初的方案是直接采用将文件转化为base64，再进行上传，由于文件转化为base64后，文件大小会增加30%。又导致上传压力，影响用户体验。最终采取了以formData形式进行上传，也就是 File 上传文件。以这种形式可以提高上传速度提高30%以上。下面会讲解开发过程及遇到的问题。
二、实现方法
1、读取文件
通过input标签，我们可以得到一个file文件将这个file进行处理。
<input class="upload" type="file" ref="upload" accept="image/jpeg,image/jpg,image/png" @change="uploadImg($event)">
// 选择本地图片
uploadImg (e) {
let file = e.target.files[0]
}
2、实例化FormData对象
因为我们是以表单的形式上传文件，所以必须进行实例化，再添加属性以及值。注意，这里必须进行实例化，否则无法上传。我们可以把formdata作为参数上传给后端。
uploadImg (e) {
// 获取file
let file = e.target.files[0]
// 实例化
let formdata = new FormData()
formdata.append('file', file)
}
3、配置axios
在axios配置中，我们需要用POST方法，再配置headers,需要这个浏览器才知道是表单。
headers: {
'Content-Type': 'multipart/form-data;charset=UTF-8'
}
uploadImg (e) {
// 获取file
let file = e.target.files[0]
// 实例化
let formdata = new FormData()
formdata.append('file', file)
upload(formdata).then(res => {
// ...
})
}
基本的步骤就以上3个，但是开发过程中会遇到一些不明觉厉的坑，下面总结一下。
三、问题
1、请求报文里面的请求参数为空
由于出现请求参数为空，我们无法发送给后端数据，无法保存成功。遇到这个可以检查一下你的axios请求拦截部分是否对数据进行了处理，我遇到是的axios请求拦截中，multipart/form-data时候，数据直接就被Qs进行序列化了，因为无法序列化FormData的内容，所以返回的data就是一个空的内容，导致最后判断是不是formData对象时出错。解决方法，如果'Content-Type' === 'multipart/form-data;charset=UTF-8'就是直接返回data，不进行序列化。
transformRequest: [function (data, headers) {
if (headers['Content-Type'] === 'application/x-www-form-urlencoded') {
// 把一个参数对象格式化为一个字符串
return qs.stringify(data)
} else if (headers['Content-Type'] === 'multipart/form-data;charset=UTF-8') {
return data
} else {
headers['Content-Type'] = 'application/json'
}
return JSON.stringify(data)
}]
2、为什么请求会加上```boundary````
请求报文中出现了这个boundary,按道理我们没有加上去，那怎么会增加这个东西呢。其实这个是浏览器自己加上去的。如果大家去看axios中源码，处理请求头部分，如下：
axios会自动的判断是否是以formData的形式上传，就将Content-Type删除，也就是删除掉了multipart/form-data这个请求头。因为这种形式需要浏览器自行设置才可以进行上传。
四、总结
这种方式上传相对比较简单，也可以减少带宽的压力，不过需要后端进行配置处理比较多，根据需求进行合理利用。
