vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
vue文件上传进度处理
Vue 大文件上传和断点续传的实现目录
- 文件上传的 2 套方案
- 基于文件流(form-data)
- 客户端把文件转换为 base64
- 大文件上传
- 获取到文件对象并转成 ArrayBuffer 对象
- 创建切片
- 发送请求
- 所有切片发送成功后
- 断点续传
- 代码汇总
- One More Thing
- FormData
- FormData.append()
基于文件流(form-data)
element-ui 框架的上传组件,就是默认基于文件流的。
- 数据格式:form-data;
- 传递的数据: file 文件流信息;filename 文件名字
通过 fileRead.readAsDataURL(file) 转为 base64 字符串后,要用 encodeURIComponent 编译再发送, 发送的数据经由 qs.stri.jpg" alt="vue文件上传进度处理(Vue 大文件上传和断点续传的实现)" border="0" />
大文件上传首先借助 element-ui 搭建下页面。因为要自定义一个上传的实现,所以 el-upload 组件的 auto-upload 要设定为 false;action 为必选参数,此处可以不填值。
<template> <li id="app"> <!-- 上传组件 --> <el-upload action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange"> <i class="el-icon-upload"></i> <li class="el-upload__text">将文件拖到此处,或<em>点击上传</em></li> <li class="el-upload__tip" slot="tip">大小不超过 200M 的视频</li> </el-upload> <!-- 进度显示 --> <li class="progress-box"> <span>上传进度:{{ percent.toFixed() }}%</span> <el-button type="primary" size="mini" @click="handleClickBtn">{{ upload | btnTextFilter}}</el-button> </li> <!-- 展示上传成功的视频 --> <li v-if="videoUrl"> <video :src="videoUrl" controls /> </li> </li> </template>
获取到文件对象并转成 ArrayBuffer 对象
转成 ArrayBuffer 是因为后面要用 SparkMD5 这个库生成 hash 值,对文件进行命名
async handleChange(file) { const fileObj = file.raw try{ const buffer = await this.fileToBuffer(fileObj) console.log(buffer) }catch(e){ console.log(e) } }
打印 buffer 结果如下图
注意:before-upload 函数和 on-change 函数的参数都有 file,但是 on-change 中的 file 不是 File 对象,要获取File 对象需要通过 file.raw。 这里用到 FileReader 类将 File 对象转 ArrayBuffer 对象,因为是异步过程,所以用 Promise 封装:
// 将 File 对象转为 ArrayBuffer fileToBuffer(file) { return new Promise((resolve, reject) => { const fr = new FileReader() fr.onload = e => { resolve(e.target.result) } fr.readAsArrayBuffer(file) fr.onerror = () => { reject(new Error('转换文件格式发生错误')) } }) }
创建切片
可以通过固定大小或是固定数量把一个文件分成好几个部分,为了避免由于 js 使用的 IEEE754 二进制浮点数算术标准可能导致的误差,我决定用固定大小的方式对文件进行切割,设定每个切片的大小为 2M,即 2M = 21024KB = 21024*1024B = 2097152B。切割文件用到的是 Blob.slice()
// 将文件按固定大小(2M)进行切片,注意此处同时声明了多个常量 const chunkSize = 2097152, chunkList = [], // 保存所有切片的数组 chunkListLength = Math.ceil(fileObj.size / chunkSize), // 计算总共多个切片 suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后缀名 // 根据文件内容生成 hash 值 const spark = new SparkMD5.ArrayBuffer() spark.append(buffer) const hash = spark.end() // 生成切片,这里后端要求传递的参数为字节数据块(chunk)和每个数据块的文件名(fileName) let curChunk = 0 // 切片时的初始位置 for (let i = 0; i < chunkListLength; i++) { const item = { chunk: fileObj.slice(curChunk, curChunk + chunkSize), fileName: `${hash}_${i}.${suffix}` // 文件名规则按照 hash_1.jpg" alt="vue文件上传进度处理(Vue 大文件上传和断点续传的实现)" border="0" />
选择一个文件后将打印得到诸如下图的结果
发送请求
发送请求可以是并行的或是串行的,这里选择串行发送。每个切片都新建一个请求,为了能实现断点续传,我们将请求封装到函数 fn 里,用一个数组 requestList 来保存请求集合,然后封装一个 send 函数,用于请求发送,这样一旦按下暂停键,可以方便的终止上传,代码如下:
sendRequest() { const requestList = [] // 请求集合 this.chunkList.forEach(item => { const fn = () => { const formData = new FormData() formData.append('chunk', item.chunk) formData.append('filename', item.fileName) return axios({ url: '/single3', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: formData }).then(res => { if (res.data.code === 0) { // 成功 if (this.percentCount === 0) { this.percentCount = 100 / this.chunkList.length } this.percent += this.percentCount // 改变进度 } }) } requestList.push(fn) }) let i = 0 // 记录发送的请求个数 const send = async () => { // if ('暂停') return if (i >= requestList.length) { // 发送完毕 return } await requestList[i]() i++ send() } send() // 发送请求 },
axios 部分也可以直接写成下面这种形式:
axios.post('/single3', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
所有切片发送成功后
根据后端接口需要再发送一个 get 请求并把文件的 hash 值传给服务器,我们定义一个 complete 方法来实现,这里假定发送的为视频文件
const complete = () => { axios({ url: '/merge', method: 'get', params: { hash: this.hash } }).then(res => { if (res.data.code === 0) { // 请求发送成功 this.videoUrl = res.data.path } }) }
这样就能在文件发送成功后在页面浏览到发送的视频了。
断点续传首先是暂停按钮文字的处理,用了一个过滤器,如果 upload 值为 true 则显示“暂停”,否则显示“继续”:
filters: { btnTextFilter(val) { return val ? '暂停' : '继续' } }
当按下暂停按钮,触发 handleClickBtn 方法
handleClickBtn() { this.upload = !this.upload // 如果不暂停则继续上传 if (this.upload) this.sendRequest() }
在发送切片的 send 方法的开头添加 if (!this.upload) return,这样只要 upload 这个变量为 false 就不会继续上传了。为了在暂停完后可以继续发送,需要在每次成功发送一个切片后将这个切片从 chunkList 数组里删除 this.chunkList.splice(index, 1)
代码汇总<template> <li id="app"> <!-- 上传组件 --> <el-upload action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange"> <i class="el-icon-upload"></i> <li class="el-upload__text">将文件拖到此处,或<em>点击上传</em></li> <li class="el-upload__tip" slot="tip">大小不超过 200M 的视频</li> </el-upload> <!-- 进度显示 --> <li class="progress-box"> <span>上传进度:{{ percent.toFixed() }}%</span> <el-button type="primary" size="mini" @click="handleClickBtn">{{ upload | btnTextFilter}}</el-button> </li> <!-- 展示上传成功的视频 --> <li v-if="videoUrl"> <video :src="videoUrl" controls /> </li> </li> </template> <script> import SparkMD5 from "spark-md5" import axios from "axios" export default { name: 'App3', filters: { btnTextFilter(val) { return val ? '暂停' : '继续' } }, data() { return { percent: 0, videoUrl: '', upload: true, percentCount: 0 } }, methods: { async handleChange(file) { if (!file) return this.percent = 0 this.videoUrl = '' // 获取文件并转成 ArrayBuffer 对象 const fileObj = file.raw let buffer try { buffer = await this.fileToBuffer(fileObj) } catch (e) { console.log(e) } // 将文件按固定大小(2M)进行切片,注意此处同时声明了多个常量 const chunkSize = 2097152, chunkList = [], // 保存所有切片的数组 chunkListLength = Math.ceil(fileObj.size / chunkSize), // 计算总共多个切片 suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后缀名 // 根据文件内容生成 hash 值 const spark = new SparkMD5.ArrayBuffer() spark.append(buffer) const hash = spark.end() // 生成切片,这里后端要求传递的参数为字节数据块(chunk)和每个数据块的文件名(fileName) let curChunk = 0 // 切片时的初始位置 for (let i = 0; i < chunkListLength; i++) { const item = { chunk: fileObj.slice(curChunk, curChunk + chunkSize), fileName: `${hash}_${i}.${suffix}` // 文件名规则按照 hash_1.jpg" alt="vue文件上传进度处理(Vue 大文件上传和断点续传的实现)" border="0" />
效果如下图:
One More ThingFormData
这里发送数据用到了 FormData,如果编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。
FormData.append()
会添加一个新值到 FormData 对象内的一个已存在的键中,如果键不存在则会添加该键。该方法可以传递 3 个参数,formData.append(name, value, filename),其中 filename 为可选参数,是传给服务器的文件名称, 当一个 Blob 或 File 被作为第二个参数的时候, Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。
到此这篇关于Vue 大文件上传和断点续传的实现的文章就介绍到这了,更多相关Vue 大文件上传和断点续传内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue代码统计(Vue实现计数器案例)
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue滑动切换页面(vue实现点击翻转效果)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- mongovue的使用
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- vue时间转换(vue如何动态实时的显示时间浅析)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
热门推荐
- mysql常用存储方案及基本原理(详解分析MySQL8.0的内存消耗)
- 网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)
- ConcurrentDictionary与Dictionary的区别
- mysql的默认数据库例子在哪里(修改MySQL8.0 默认的数据目录快捷操作无配置)
- h5获取ios系统版本(详解h5页面在不同ios设备上的问题总结)
- html5拖动效果怎么写(Html5 滚动穿透的方法)
- dedecms调用logo标签(dedecms返回列表页功能的标签代码)
- 小程序ui图与移动ui(AmazeUI 缩略图的实现示例)
- sqlserver表值函数用法(SQL Server数据库中的表名称、字段比较)
- mysql join规则(浅谈为什么MySQL不推荐使用子查询和join)