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

四、总结

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


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

查看所有标签

猜你喜欢:

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

C Primer Plus

C Primer Plus

Stephen Prata、云巅工作室 / 云巅工作室 / 人民邮电出版社 / 2005-2-1 / 60.00元

《C Primer Plus(第5版)(中文版)》共17章。第1、2章学习C语言编程所需的预备知识。第3到15章介绍了C语言的相关知识,包括数据类型、格式化输入输出、运算符、表达式、流程控制语句、函数、数组和指针、字符串操作、内存管理、位操作等等,知识内容都针对C99标准;另外,第10章强化了对指针的讨论,第12章引入了动态内存分配的概念,这些内容更加适合读者的需求。第16章和第17章讨论了C预处......一起来看看 《C Primer Plus》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具