位置: IT常识 - 正文

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传(基于网页的客服系统)

编辑:rootadmin
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传 1. 前言

推荐整理分享基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传(基于网页的客服系统),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:基于是什么意思,基于专业性的家校双向互动,需要家长的学校教育参与,基于中国国情的中国式现代化具有哪些特色,基于专业性的家校双向互动,需要家长的学校教育参与,基于网页的客服系统,基于网页的客服系统,基于专业性的家校双向互动,需要家长的学校教育参与,基于是什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!

文件上传 小文件(图片、文档、视频)上传可以直接使用很多ui框架封装的上传组件,或者自己写一个input 上传,利用FormData 对象提交文件数据,后端使用spring提供的MultipartFile进行文件的接收,然后写入即可。但是对于比较大的文件,比如上传2G左右的文件(http上传),就需要将文件分片上传(file.slice()),否则中间http长时间连接可能会断掉。

分片上传 分片上传,就是将所要上传的文件,按照一定的大小,将整个文件分隔成多个数据块(我们称之为Part)来进行分别上传,上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。

秒传 通俗的说,你把要上传的东西上传,服务器会先做MD5校验,如果服务器上有一样的东西,它就直接给你个新地址,其实你下载的都是服务器上的同一个文件,想要不秒传,其实只要让MD5改变,就是对文件本身做一下修改(改名字不行),例如一个文本文件,你多加几个字,MD5就变了,就不会秒传了.

断点续传 断点续传是在下载或上传时,将下载或上传任务(一个文件或一个压缩包)人为的划分为几个部分,每一个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传或者下载未完成的部分,而没有必要从头开始上传或者下载。本文的断点续传主要是针对断点上传场景。

关于vue-simple-uploader

vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种:

支持文件、多文件、文件夹上传;支持拖拽文件、文件夹上传可暂停、继续上传错误处理支持“秒传”,通过文件判断服务端是否已存在从而实现“秒传”分块上传支持进度、预估剩余时间、出错自动重试、重传等操作大文件上传流程前端对文件进行MD5加密,并且将文件按一定的规则分片;vue-simple-uploader先会发送get请求校验分片数据在服务端是否完整,如果完整则进行秒传,如果不完整或者无数据,则进行分片上传。后台校验MD5值,根据上传的序号和分片大小计算相应的开始位置并写入该分片数据到文件中。基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传(基于网页的客服系统)

建议先读一遍simple-uploader.js的文档,然后再读一下vue-simple-uploader的文档,了解一下各个参数的作用是什么 vue-simple-uploader文档 simple-uploader.js文档

安装

npm install vue-simple-uploader --save

使用:

// 在main.js中:import uploader from 'vue-simple-uploader'Vue.use(uploader)

相关概念

chunkNumber: 当前块的次序,第一个块是 1,注意不是从 0 开始的。totalChunks: 文件被分成块的总数。chunkSize: 分块大小,根据 totalSize 和这个值可以计算出总共的块数。注意最后一块的大小可能会比这个要大。currentChunkSize: 当前块的大小,实际大小。totalSize: 文件总大小。identifier: 这个就是MD5值,每个文件的唯一标示。filename: 文件名基于vue-simple-uploader封装全局上传组件

代码参考: git代码

点击按钮,触发文件上传操作;选择文件后,将上传的窗口展示出来,开始md5的计算工作onFileAdded(file) { this.panelShow = true Bus.$emit('fileAdded') // 将额外的参数赋值到每个文件上,以不同文件使用不同params的需求 file.params = this.params // 计算MD5,完成后开始上传操作 this.computeMD5(file).then((result) => this.startUpload(result))},

具体的MD5计算方法,会在下面讲,这里先简单引出。 上传过程中,会不断触发file-progress上传进度的回调

// 文件进度的回调onFileProgress(rootFile, file, chunk) { console.log(`上传中 ${file.name},chunk:${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)},文件上传成功后 文件上传成功后,在“上传完成”的回调中,通过服务端返回的needMerge字段,来判断是否需要再发送合并分片的请求, 如果这个字段为true,则需要给后台发一个请求合并的ajax请求,否则直接上传成功。 注意:这里的needMerge是和后台商议决定的字段名onFileSuccess(rootFile, file, response, chunk) { let res = JSON.parse(response); // 服务器自定义的错误,这种错误是Uploader无法拦截的 if (!res.result) { this.$message({ message: res.message, type: 'error' }); return }// 如果服务端返回需要合并 if (res.needMerge) { api.mergeSimpleUpload({ tempName: res.tempName, fileName: file.name, ...file.params, }).then(data => { // 文件合并成功 Bus.$emit('fileSuccess', data); }).catch(e => {}); // 不需要合并 } else { Bus.$emit('fileSuccess', res); console.log('上传成功'); }},onFileError(rootFile, file, response, chunk) {console.log(error)},文件分片 vue-simple-uploader自动将文件进行分片,在options的chunkSize中可以设置每个分片的大小。对于大文件来说,会发送多个请求,在设置testChunks为true后(在插件中默认就是true),会发送与服务器进行分片校验的请求,第一个get请求就是该请求;后面的每一个post请求都是上传分片的请求。 看一下发送给服务端的参数,其中chunkNumber表示当前是第几个分片,totalChunks代表所有的分片数,这两个参数都是都是插件根据你设置的chunkSize来计算的。

需要注意的就是在最后文件上传成功的事件中,通过后台返回的字段,来判断是否要再给后台发送一个文件合并的请求。

MD5的计算过程 断点续传及秒传的基础是要计算文件的MD5,这是文件的唯一标识,然后服务器根据MD5进行判断,是进行秒传还是断点续传。在file-added事件之后,就计算MD5,我们最终的目的是将计算出来的MD5加到参数里传给后台,然后继续文件上传的操作,详细的思路步骤是: 1)把uploader组件的autoStart设为false,即选择文件后不会自动开始上传 2)先通过 file.pause()暂停文件,然后通过H5的FileReader接口读取文件 3)将异步读取文件的结果进行MD5,这里我用的加密工具是spark-md5,你可以通过npm install spark-md5 --save来安装,也可以使用其他MD5加密工具。 4)file有个属性是uniqueIdentifier,代表文件唯一标示,我们把计算出来的MD5赋值给这个属性 file.uniqueIdentifier = md5,这就实现了我们最终的目的。 5)通过file.resume()开始/继续文件上传。/** * 计算md5值,以实现断点续传及秒传 * @param file * @returns Promise */computeMD5(file) { let fileReader = new FileReader() let time = new Date().getTime() let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice let currentChunk = 0 const chunkSize = 10 * 1024 * 1000 let chunks = Math.ceil(file.size / chunkSize) let spark = new SparkMD5.ArrayBuffer() // 文件状态设为"计算MD5" this.statusSet(file.id, 'md5') file.pause() // 计算MD5时隐藏”开始“按钮 this.$nextTick(() => { document.querySelector(`.file-${file.id} .uploader-file-resume`).style.display = 'none' }) loadNext() return new Promise((resolve, reject) => { fileReader.onload = (e) => { spark.append(e.target.result) if (currentChunk < chunks) { currentChunk++ loadNext() // 实时展示MD5的计算进度 this.$nextTick(() => { const md5ProgressText ='校验MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%' document.querySelector(`.custom-status-${file.id}`).innerText = md5ProgressText }) } else { let md5 = spark.end() // md5计算完毕 resolve({md5, file}) console.log( `MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${ new Date().getTime() - time } ms` ) } } fileReader.onerror = function () { this.error(`文件${file.name}读取出错,请检查该文件`) file.cancel() reject() } }) function loadNext() { let start = currentChunk * chunkSize let end = start + chunkSize >= file.size ? file.size : start + chunkSize fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end)) }},// md5计算完毕,开始上传startUpload({md5, file}) { file.uniqueIdentifier = md5 file.resume() this.statusRemove(file.id)},

给file的uniqueIdentifier 属性赋值后,请求中的identifier即是我们计算出来的MD5

秒传及断点续传 在计算完MD5后,我们就能谈断点续传及秒传的概念了。 服务器根据前端传过来的MD5去判断是否可以进行秒传或断点续传: 1)服务器发现文件已经完全上传成功,则直接返回秒传的标识。 2)服务器发现文件上传过分片信息,则返回这些分片信息,告诉前端继续上传,即断点续传。 3)对于前端来说在每次上传过程的最开始,vue-simple-uploader会发送一个get请求,来问服务器我哪些分片已经上传过了, 这个请求返回的结果也有几种可能: a. 如果是秒传,在请求结果中会有相应的标识,比如我这里是skipUpload为true,且返回了url,代表服务器告诉我们这个文件已经有了,我直接把url给你,你不用再传了,这就是秒传。 图1,秒传状态下返回值 b. 如果后台返回了分片信息,这是断点续传。如图,返回的数据中有个uploaded的字段,代表这些分片是已经上传过的了,插件会自动跳过这些分片的上传。 7.2 前端做分片检验:checkChunkUploadedByResponse 前面讲的是概念,现在说一说前端在拿到这些返回值之后怎么处理。 插件自己是不会判断哪个需要跳过的,在代码中由options中的checkChunkUploadedByResponse控制,它会根据 XHR 响应内容检测每个块是否上传成功了,成功的分片直接跳过上传 你要在这个函数中进行处理,可以跳过的情况下返回true即可。checkChunkUploadedByResponse: function (chunk, message) { let objMessage = JSON.parse(message); if (objMessage.skipUpload) { return true; } return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0},// 注:skipUpload 和 uploaded 是和后台商议的字段,要按照后台实际返回的字段名来。

整理了下vue-simple-uploader 常见的问题: vue-simple-uploader 常见问题整理

本文链接地址:https://www.jiuchutong.com/zhishi/289773.html 转载请保留说明!

上一篇:JS如何监听一个变量改变?(js监听hover)

下一篇:CSS3模拟小仓鼠一直奔跑的动画特效(仓鼠模拟器3d无限金币中文)

  • 打造精彩的微博内容,须做3点(精彩微博吧)

    打造精彩的微博内容,须做3点(精彩微博吧)

  • 笔记本电脑直接盖上是休眠还是睡眠(笔记本电脑直接黑屏关机怎么回事)

    笔记本电脑直接盖上是休眠还是睡眠(笔记本电脑直接黑屏关机怎么回事)

  • 苹果手机用流量下载软件该怎么设置(苹果手机用流量打王者为什么会很卡)

    苹果手机用流量下载软件该怎么设置(苹果手机用流量打王者为什么会很卡)

  • 抖音界面排版怎么设置(抖音界面排版怎么设置房地产)

    抖音界面排版怎么设置(抖音界面排版怎么设置房地产)

  • 怎么下载优酷视频(怎么下载优酷视频到相册)

    怎么下载优酷视频(怎么下载优酷视频到相册)

  • 华为音乐怎么卸载(怎么能把华为音乐卸载)

    华为音乐怎么卸载(怎么能把华为音乐卸载)

  • 华为手机怎么清理后台(华为手机怎么清理空间)

    华为手机怎么清理后台(华为手机怎么清理空间)

  • 抖音属于什么系(抖音属于什么系列)

    抖音属于什么系(抖音属于什么系列)

  • 声纹采集是什么意思(声纹采集准确吗)

    声纹采集是什么意思(声纹采集准确吗)

  • sdv文件用什么播放软件(sdv格式转换mp4)

    sdv文件用什么播放软件(sdv格式转换mp4)

  • 华为nova7se呼吸灯怎么设置(华为nova7手机呼吸灯在哪里设置)

    华为nova7se呼吸灯怎么设置(华为nova7手机呼吸灯在哪里设置)

  • 双控开关一个关了另一个开不了(双控开关一个关了另一个开不了是不是少了一条线)

    双控开关一个关了另一个开不了(双控开关一个关了另一个开不了是不是少了一条线)

  • 打印机耗材都有哪些(打印机耗材都有哪些品牌)

    打印机耗材都有哪些(打印机耗材都有哪些品牌)

  • 锐龙r33200u相当于(锐龙r32200u相当于)

    锐龙r33200u相当于(锐龙r32200u相当于)

  • 手机里本地音乐怎么删除(手机里本地音乐怎么导入手机)

    手机里本地音乐怎么删除(手机里本地音乐怎么导入手机)

  • 华为mate30原装耳机什么型号(华为mate30原装耳机插上没反应)

    华为mate30原装耳机什么型号(华为mate30原装耳机插上没反应)

  • 小米手环4电池能用多久(小米手环4电池饿死激活方法)

    小米手环4电池能用多久(小米手环4电池饿死激活方法)

  • 红米note8pro怎么开通mipay(红米note8pro怎么录屏幕)

    红米note8pro怎么开通mipay(红米note8pro怎么录屏幕)

  • oppok5是双卡双待吗(oppok5是不是双卡)

    oppok5是双卡双待吗(oppok5是不是双卡)

  • 淘宝店铺如何发送链接(淘宝店铺如何发布商品视频)

    淘宝店铺如何发送链接(淘宝店铺如何发布商品视频)

  • 表格的画线工具在哪里(表格中画线条怎么制作)

    表格的画线工具在哪里(表格中画线条怎么制作)

  • 闪白特效在哪里(闪白音效)

    闪白特效在哪里(闪白音效)

  • 一加7pro屏占比多少(一加7pro屏幕尺寸比例)

    一加7pro屏占比多少(一加7pro屏幕尺寸比例)

  • 酷狗音乐视频怎么保存到相册(酷狗音乐视频怎么下载到手机相册)

    酷狗音乐视频怎么保存到相册(酷狗音乐视频怎么下载到手机相册)

  • 朋友圈怎么发无声视频(朋友圈怎么发无压缩视频)

    朋友圈怎么发无声视频(朋友圈怎么发无压缩视频)

  • win10怎么打开internet选项属性弹窗? internet选项打开的技巧(win10怎么打开任务管理器)

    win10怎么打开internet选项属性弹窗? internet选项打开的技巧(win10怎么打开任务管理器)

  • 浏览器本地存储的四种方式(浏览器本地存储的方式)

    浏览器本地存储的四种方式(浏览器本地存储的方式)

  • 免缴车船税
  • 税目是什么意思和内容
  • 高新企业收到政府补贴怎么做账
  • 差旅费的现金流
  • 发票金额多开了有事吗
  • 处置其他权益工具投资时,应按取得的价款
  • 团建费用会计怎么写记账凭证
  • 增值税抵扣凭证装订要求
  • 开具银行资信证明
  • 外资企业对应的企业是什么
  • 最新的税收政策
  • 一次性取得的租金收入
  • 收到外商投入资金
  • 资产负债表金额越来越大代表什么
  • 收到长期股权投资的现金股利
  • 叉车车船税每年都要交吗
  • 印刷专票税率是几个点
  • 手撕票验旧是什么意思
  • 水利建设专项收入的税率是多少?
  • 清算期待摊费用怎么计算
  • 购买加油卡怎么充值
  • php的编辑工具有哪些
  • OS X Yosemite系统怎么制作u盘安装盘
  • 事业单位工会会员费如何计算
  • 公司为什么要签劳务协议
  • 买股指期货有什么条件
  • 返还保证金的法律依据
  • 电风扇需要用完电再充吗
  • wamp设置
  • 设置pin是什么意思
  • 企业工商年检什么意思
  • swiper.js常用功能
  • php十进制转二进制算法
  • 【Pytorch深度学习实战】(11)变分自动编码器(VAE)
  • 新闻管理系统类图
  • 动态内存管理
  • 命令行mkdir创建文件夹
  • 收到利息收入计入什么科目
  • java微信公众号开发源码
  • 哪些情形需要办理会计工作交接
  • 劳务分包的形式有哪些
  • 增值税专票只有右上角有发票号码
  • 商品流通企业采用售价法核算条件下
  • 收到退税收入
  • MySQL中用通用查询日志找出查询次数最多的语句的教程
  • 股权转让过程中的税费
  • 本年利润总分类账怎么写
  • 员工报销的差旅费会计分录
  • 超过保质期放冰箱还能吃吗
  • 月末应交增值税借方余额期末该怎么处理
  • 纳税人为风险纳税人怎么办
  • 记账凭证审核的内容
  • 所得税审核一般需要多久
  • 期末损益类科目结转
  • 销售收入指开票金额吗
  • 其他债权投资减值影响账面价值吗
  • 补记式余额调节法怎么写项目
  • 小微企业要交残疾证吗
  • Windows 2003作中转VPN服务器多路由共享上网的方法
  • redhat常用命令总结
  • centos进入
  • vcspawn.exe什么意思
  • win7链接联机id
  • win7系统修改
  • linux的io
  • window10怎么获取ip地址
  • vim编辑器命令大全
  • 如何修改excel数据显示格式
  • 详谈左晖
  • ubuntu20.04怎么安装
  • jquery配合.NET实现点击指定绑定数据并且能够一键下载
  • 猫猫的游戏
  • 江苏省国家税务局总局官网
  • 电子普通发票怎么查验真伪
  • 广东省电子税务局电话
  • 个人出租房屋如何计税?看这篇
  • 税务谈心谈话记录2021
  • 跨区迁移税务需要注销吗?
  • 税务局的局长是什么级别
  • 金税盘里的发票清单怎么导出
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设