前端实现axios以表单方式上传文件，优化上传速度

1、背景

最近在开发过程当中，遇到的须要是须要上传高清图片，必须原图上传。因为在移动端应用，上传网络问题有很大的坑。当初的方案是直接采用将文件转化为base64，再进行上传，因为文件转化为base64后，文件大小会增长30%。又致使上传压力，影响用户体验。最终采起了以formData形式进行上传，也就是 File 上传文件。以这种形式能够提升上传速度提升30%以上。下面会讲解开发过程及遇到的问题。

2、实现方法

一、读取文件

经过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]
    }
复制代码

二、实例化FormData对象

由于咱们是以表单的形式上传文件，因此必须进行实例化，再添加属性以及值。注意，这里必须进行实例化，不然没法上传。咱们能够把formdata做为参数上传给后端。

uploadImg (e) {
    // 获取file
      let file = e.target.files[0]
      // 实例化
      let formdata = new FormData()
      formdata.append('file', file)
    }
复制代码

三、配置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个，可是开发过程当中会遇到一些不明觉厉的坑，下面总结一下。

3、问题

一、请求报文里面的请求参数为空

因为出现请求参数为空，咱们没法发送给后端数据，没法保存成功。遇到这个能够检查一下你的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)
  }]

复制代码

二、为何请求会加上```boundary````

请求报文中出现了这个boundary,按道理咱们没有加上去，那怎么会增长这个东西呢。其实这个是浏览器本身加上去的。若是你们去看axios中源码，处理请求头部分，以下：

axios会自动的判断是不是以formData的形式上传，就将Content-Type删除，也就是删除掉了multipart/form-data这个请求头。由于这种形式须要浏览器自行设置才能够进行上传。

4、总结

这种方式上传相对比较简单，也能够减小带宽的压力，不过须要后端进行配置处理比较多，根据需求进行合理利用。