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

栏目: jQuery · 发布时间: 5年前

内容简介:最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传。由于在移动端应用,上传网络问题有很大的坑。当初的方案是直接采用将文件转化为通过input标签,我们可以得到一个file文件将这个file进行处理。

最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传。由于在移动端应用,上传网络问题有很大的坑。当初的方案是直接采用将文件转化为 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请求拦截部分是否对数据进行了处理,我遇到是的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以表单方式上传文件,优化上传速度

axios会自动的判断是否是以 formData 的形式上传,就将Content-Type删除,也就是删除掉了multipart/form-data这个请求头。因为这种形式需要浏览器自行设置才可以进行上传。

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

四、总结

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解计算机系统(英文版·第2版)

深入理解计算机系统(英文版·第2版)

[美] Randal E. Bryant、[美] David R. O'Hallaron / 机械工业出版社 / 2011-1 / 128.00元

本书是一本将计算机软件和硬件理论结合讲述的经典教程,内容覆盖计算机导论、体系结构和处理器设计等多门课程。本书的最大优点是为程序员描述计算机系统的实现细节,通过描述程序是如何映射到系统上,以及程序是如何执行的,使读者更好地理解程序的行为为什么是这样的,以及造成效率低下的原因。 相对于第1版,本版主要是反映了过去十年间硬件技术和编译器的变化,具体更新如下: 1. 对系统的介绍(特别是实际使......一起来看看 《深入理解计算机系统(英文版·第2版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具