前端实现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以表单方式上传文件,优化上传速度

四、总结

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


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

查看所有标签

猜你喜欢:

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

深入理解计算机系统

深入理解计算机系统

Randal E.Bryant、David O'Hallaron / 龚奕利、雷迎春 / 中国电力出版社 / 2004-5-1 / 85.00元

从程序员的视角,看计算机系统! 本书适用于那些想要写出更快、更可靠程序的程序员。通过掌握程序是如何映射到系统上,以及程序是如何执行的,读者能够更好的理解程序的行为为什么是这样的,以及效率低下是如何造成的。粗略来看,计算机系统包括处理器和存储器硬件、编译器、操作系统和网络互连环境。而通过程序员的视角,读者可以清晰地明白学习计算机系统的内部工作原理会对他们今后作为计算机科学研究者和工程师的工作有......一起来看看 《深入理解计算机系统》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换