前端实现断点续传文件

公司要求实现的功能,大概思路是将上传的文件通过jsZip压缩后,进行切片,留一下总切片,当前片,并把这些数据给后端,至于前端的校验,是由Md5完成的,验证文件唯一性,这样下次上传该文件的时候就会略过并更新已经上传过的切片,开始下一片的续传。

首先是创建一个上传按钮,绑定上传事件,我这边是需要放在表格里,并且需要是base64格式所以有个转换,具体看个人需求:

  importModel() {this.fileIndex = 0const input = document.createElement('input');input.type = 'file';input.onchange = (event) => {let selectedFiles = this.fileFilter(event.target.files);if (selectedFiles.length > 0) {const zip = new JSZip();for (let i = 0; i < selectedFiles.length; i++) {zip.file(selectedFiles[i].name, selectedFiles[i], { date: new Date(2023, 0, 1) });}zip.generateAsync({ type: "base64" }).then((content) => {zip.generateAsync({ type: "uint8array" }).then(content1 => {this.fileData = [{ file: content, fileMd5: md5(content1), zipInfo: {}, type: '文件名 '+ '.zip', std: '50%', address: '删除', progressValue: 0 }];})});this.compress = false;}else {this.$message.error('请上传有效文件');}};input.click();},

接下来是上传的方法 (

 uploadFiles() {if (this.fileIndex < this.fileData.length)
//下面这个接口是跟后端约定好的需要的参数,个人需求可以不用走,这边拿到返回的id再带给下一个方法,实际接口({size://压缩后返回的大小,fileName: 实际上传的文件名//}).then(response => {this.indexedDBHelper.get(this.fileData[this.fileIndex].fileMd5).then((d) => {if (d)this.fileData[this.fileIndex].zipInfo = d.dataelsethis.fileData[this.fileIndex].zipInfo = {id: 后端带回来的id,看个人需求,fileSize:this.fileData[this.fileIndex].file.length,chunkSize: 4 * 1024 * 1024,chunkCount: Math.ceil(文件大小 / (4 * 1024 * 1024)),currentChunk: 0, //初始上传切片}this.uploadNextChunk()})});elseconsole.log('全部上传完成')},
 ///上传文件切片uploadNextChunk() {let { currentChunk, chunkCount } = this.fileData[this.fileIndex].zipInfoif ((currentChunk) < chunkCount) {this.uploadChunk().then(response => {this.showConnectingMessage = false;if (response?.data) {this.$set(this.fileData[this.fileIndex], 'progressValue', Math.round(((currentChunk + 1) / chunkCount) * 100));//更新进度条this.fileData[this.fileIndex].zipInfo.currentChunk += 1this.uploadNextChunk();this.indexedDBHelper.set({ id: this.fileData[this.fileIndex].fileMd5, data: this.fileData[this.fileIndex].zipInfo })//保存md5及信息到indexDB}});} else {this.$set(this.fileData[this.fileIndex], 'progressValue', 100);this.indexedDBHelper.delete(this.fileData[this.fileIndex].fileMd5)//上传完成,清空md5this.fileIndex += 1this.uploadFiles()}},///调用后端接口uploadChunk() {let start = (this.fileData[this.fileIndex].zipInfo.currentChunk) * this.fileData[this.fileIndex].zipInfo.chunkSize;let end = Math.min(this.fileData[this.fileIndex].zipInfo.fileSize, start + this.fileData[this.fileIndex].zipInfo.chunkSize);let chunkFile = this.fileData[this.fileIndex].file.slice(start, end);const uploadData = {id: this.fileData[this.fileIndex].zipInfo.id,fileBase64: 'Base64,' + chunkFile,fileName: this.fileData[this.fileIndex].zipInfo.fileName,size: chunkFile.length,chunks: this.fileData[this.fileIndex].zipInfo.chunkCount,chunk: this.fileData[this.fileIndex].zipInfo.currentChunk,md5: this.fileData[this.fileIndex].flieMd5,};return 后端接口(uploadData); //将数据发送给后端接口},

最后是删除方法,绑定在按钮上就可以

deleteItem() {MessageBox.confirm('确定删除该文件吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {后端接口(this.fileData[this.fileIndex].zipInfo.id)//将需要删除的id发送给后端.then(response => {const index = this.fileData.findIndex(item => item.id === this.fileData[this.fileIndex].zipInfo.id);if (index !== -1) {this.fileData.splice(index, 1);}}).catch(error => {console.error('删除文件时出错:', error);});}).catch(() => {});},

虽然这个功能可以实现续传,整个流程也通了,但是有个问题就是无法承担太大的文件,如果需求是中小文件的话是可以用的,超大文件的话会崩。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/583164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是受检异常和非受检异常 一、首先是异常的本质 二、然后是对受检异常和非受检异常的定义 三、最后我还可以说下他们优点和缺点) 受检异常优点有两个:

文章目录 什么是受检异常和非受检异常一、首先是异常的本质二、然后是对受检异常和非受检异常的定义三、最后我还可以说下他们优点和缺点&#xff09; 受检异常优点有两个&#xff1a; 什么是受检异常和非受检异常 可以从三个方面回答这个问题一、首先是异常的本质&#xff09…

V-rep(CoppeliaSim)添加相机,与python联合仿真,并使用python读取V-rep中的RGB图与深度图

目录 前言在V-rep中构建场景建立python与V-rep通信 前言 本文主要介绍了如何使用python与V-rep联合仿真&#xff0c;并用OpenCV可视化V-rep中视觉传感器所能看到的 RGB图和深度图&#xff0c;效果图如下。 在V-rep中构建场景 本文使用的V-rep版本是3.5&#xff1a; 打开V-…

react使用useState更新数组失败

失败案例&#xff1a; const [addBox, setAddBox] useState([])const itemAdd (item) >{addBox.push(item);setAddBox(addBox)console.log(addBox,点击添加按钮)} 原因&#xff1a;react的useState hook监听的是浅监听 在 React 中&#xff0c;使用 useState Hook 来更新…

junit.Test 的使用方法

在 Maven 项目中使用 JUnit&#xff0c;你需要在项目的 pom.xml 文件中添加 JUnit 依赖。然后&#xff0c;你可以创建测试类&#xff0c;并在测试类中使用 Test 注解标识测试方法。 文章目录 基本使用其他注解Before 和 AfterBeforeClass 和 AfterClassIgnoreRunWith参数化测试…

C#判断骨龄与生活年龄的比较

什么是骨龄 骨龄是骨骼年龄的简称&#xff0c;它能体现人体生长发育程度。随着生长发育&#xff0c;不同年龄段的骨骺发育成熟度不一样而出现不同的影像特征&#xff0c;是骨龄检测的理论基础。手指腕掌具有20多块骨骼&#xff0c;在各个年龄段具有不同的特点&#xff0c;因而…

009:vue结合el-table实现表格行拖拽排序(基于sortablejs)

文章目录 1. 实现效果2. 安装 sortablejs 插件3. 完整组件代码4. 注意点 1. 实现效果 2. 安装 sortablejs 插件 sortablejs 更多用法 cnpm i --save sortablejs3. 完整组件代码 <template><div class"home"><div class"body"><el-ta…

MongoDB 面试题

MongoDB 面试题 1. 什么是MongoDB&#xff1f; MongoDB是一种非关系型数据库&#xff0c;被广泛用于大型数据存储和分布式系统的构建。MongoDB支持的数据模型比传统的关系型数据库更加灵活&#xff0c;支持动态查询和索引&#xff0c;也支持BSON格式的数据存储&#xff0c;这…

catboost回归自动调参

import os import time import optuna import pandas as pd from catboost import CatBoostRegressor from sklearn.metrics import r2_score, mean_squared_error from sklearn.model_selection import train_test_split X_train data.drop([‘label’, ‘b1’, ‘b2’], a…

探究公有云中的巨人:深入分析大数据产品的架构设计

目录 一、服务器分类 二、公有云基础和产品 网络 vpc专有网络 弹性公网IP(Elastic IP)

3种事件绑定的异同(js的问题)

html事件 dom0事件 dom2事件 • 广义javascript ECMAScript DOM BOM DOM0 DOM1 DOM2 • 狭义javascript ECMAScript ES6 ES5 ES3 事件监听的优点&#xff1a;可以绑定多个事件&#xff0c;常规的事件绑定只执行最后绑定的事件 事件绑定&#xff1a;相当于存储…

从外网访问内网服务器:安装到使用一站通

如果你所在的是一个小的实验室&#xff0c;可能并没有大型的服务器集群而是仅是配备了小型服务器&#xff0c;日常工作便是在在局域网内访问服务器进行各项数据处理。因为在外网无法访问内网服务器&#xff0c;极大的限制了我们偶尔在外想监测一下数据的欲望。本文介绍了一种简…

策略模式(及案例)

策略模式 1.策略接口 定义一组算法或操作的通用接口&#xff0c;通常是一个抽象类或接口。该接口声明了策略类所必须实现的方法。 示例&#xff1a; class Strategy {doOperation() {} }2.具体策略 实现策略接口&#xff0c;提供具体的算法实现。每个具体策略类负责处理一…

二、C#基础语法( 函数与方法)

在C#语言中&#xff0c;函数和方法都是用于实现特定功能的代码块。虽然它们有一些相似之处&#xff0c;但它们在使用和定义上有一些细微的差别。 函数&#xff08;Functions&#xff09; 函数在C#中是独立的功能单元&#xff0c;执行特定操作并返回一个值。函数的定义以关键字…

postman win7 低版本 postman7.0.9win64 postman7.0.9win32

百度网盘&#xff1a; postman7.0.9win64&#xff1a; 链接: https://pan.baidu.com/s/18ck9tI0r9Pqoz36MOwwnnQ 提取码: rkf7 postman7.0.9win32&#xff1a; 链接: https://pan.baidu.com/s/1HrpGPrgvVzyAcjdHuwVOpA 提取码: ke5k win7系统安装postman&#xff0c;可能会…

postman使用-04响应

文章目录 响应响应界面说明Pretty&#xff1a;格式化显示&#xff0c;以便查看Raw&#xff1a;不进行任何处理&#xff0c;显示响应数据的原始格式Preview&#xff1a;预览响应体&#xff0c;会自动换行&#xff0c;不会格式化&#xff08;有时候是数据&#xff0c;有时候是页面…

leetcode151. 反转字符串中的单词

题目描述 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符串 s中可能会存在前导…

测试-FastJSON和Jackson-JSON库

文章目录 FastJSONJackson注意 FastJSON 直接读代码&#xff1a; Log4j2 public class FastJsonTest {Testpublic void test1() {// JSON转对象-parseObjectString jsonString "{\"name\":\"张三\",\"age\":18}";Student student …

实战 | 使用OpenCV快速去除文档中的表格线条(步骤 + 源码)

导 读 本文主要介绍如何使用OpenCV快速去除文档中的表格线条,并给详细步骤和代码。 背景介绍 测试图如下,目标是去除下面三张图中的表格线条,方便后续图像处理。 实现步骤 下面演示详细步骤,以图1为例: 【1】获取二值图像:加载图像、转为灰度图、OTSU二值化 i…

日本it培训班,日本IT大体分几类?

日本是一个老龄化极其严重的国家&#xff0c;拜泡沫经济破灭后的经济停滞所赐&#xff0c;民众取得了节育方面的丰硕成果&#xff0c;然而当经济终于走出阴霾&#xff0c;呈现复苏迹象时&#xff0c;短缺的劳动力又成了一大问题&#xff0c;拖累整个经济的步伐。为了应对劳工市…

仪表盘、数据分析新增分享功能及应用服务下新增服务实例菜单

近期&#xff0c;博睿数据根据一体化智能可观测平台 Bonree ONE 产品本身&#xff0c;以及用户反馈进行持续的更新和优化。以下为 Bonree ONE 产品功能更新报告第03期内容&#xff0c;更多探索&#xff0c;未完待续。 本次迭代的更新集中在平台的仪表盘、数据分析新增分享功能&…