当前位置: 首页 > news >正文

前端实现断点续传文件

公司要求实现的功能,大概思路是将上传的文件通过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(() => {});},

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

相关文章:

前端实现断点续传文件

公司要求实现的功能&#xff0c;大概思路是将上传的文件通过jsZip压缩后&#xff0c;进行切片&#xff0c;留一下总切片&#xff0c;当前片&#xff0c;并把这些数据给后端&#xff0c;至于前端的校验&#xff0c;是由Md5完成的&#xff0c;验证文件唯一性&#xff0c;这样下次…...

复试 || 就业day01(2023.12.27)算法篇

文章目录 前言两数之和存在重复元素 II好数对的数目总持续时间可被 60 整除的歌曲 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff0c;当然也可能来自洛谷或其他刷题平台 &#x1f4a…...

JavaWeb——JQuery

文章目录 JQuery 是什么?jQuery 的原理示意图JQuery 基本开发步骤jQuery 对象和 DOM 对象将dom对象转为JQuery对象jQuery 对象转成 DOM 对象jQuery 选择器基本选择器基础过滤选择器JQuery 是什么? 基本介绍 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理…...

Python教程:查询Py模块的版本号,有哪些方法?

1.查看模块内部的版本信息&#xff1a;如果你已经导入了该模块&#xff0c;可以查看模块内部的__version__属性来获取版本信息。例如&#xff0c;对于pandas模块&#xff0c;可以运行import pandas和print(pandas.version)来获取版本信息。 import pandas print(pandas.__vers…...

第一节 初始化项目

系列文章目录 第一节 初始化项目 文章目录 操作步骤 总结 操作步骤 打开cmd 输入 vue ui 在打开的网页中点击“创建”&#xff0c;复制文件夹路径并粘贴点击“在此创建新项目” 输入项目名称 点击下一步选择手动配置 选择babel、router、vuex、css pre-processors、 linter建…...

idea提示unable to import maven project

问题描述&#xff1a; idea导入maven依赖时提示unable to import maven project 打开log日志如下&#xff1a; 问题原因以及解决方案&#xff1a; maven版本与idea版本不兼容&#xff0c;切换maven版本即可...

【Spring】SpringBoot日志

文章目录 什么是日志日志的用途日志的使用如何打印日志日志级别日志框架门面模式&#xff08;外观模式&#xff09;日志级别的使用配置日志级别日志持久化配置日志的存储目录配置日志文件名配置日志文件分割 更简单的日志输出 什么是日志 在计算机领域&#xff0c;日志是一个记…...

HTML+CSS制作动漫绿巨人

🎀效果展示 🎀代码展示 <!DOCTYPE html> <html lang="en" > <head>...

AGV智能搬运机器人-替代人工工位让物流行业降本增效

在当今快速发展的世界中&#xff0c;物流业面临着巨大的挑战&#xff0c;包括提高效率、降低成本和优化工作流程。为了应对这些挑战&#xff0c;一种新型的自动化设备——智能搬运机器人正在崭露头角。本文将通过一个具体的案例来展示富唯智能转运机器人在实际应用中的价值。 案…...

【办公技巧】怎么批量提取文件名到excel

Excel是大家经常用来制作表格的文件&#xff0c;比如输入文件名&#xff0c;如果有大量文件需要输入&#xff0c;用张贴复制或者手动输入的方式还是很费时间的&#xff0c;今天和大家分享如何批量提取文件名。 打开需要提取文件名的文件夹&#xff0c;选中所有文件&#xff0c…...

uniapp实现前端银行卡隐藏中间的数字,及隐藏姓名后两位

Vue 实现前端银行卡隐藏中间的数字 主要应用了 filters过滤器 来实现效果 实现效果&#xff0c;如图&#xff1a; <template><div><div style"background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"><p>原来&#…...

HPCC:高精度拥塞控制

HPCC&#xff1a;高精度拥塞控制 文章目录 HPCC&#xff1a;高精度拥塞控制摘要1 引言1.1 背景1.2 现有CC的局限性1.3 HPCC的提出 2 研究动机2.1 大型RDMA部署2.2 RDMA目标2.3 当前RDMA CC中的权衡DCQCNTIMELY 2.4 下一代高速CC 3 技术方案3.1 INT3.2 HPCC设计3.3 HPPC的参数 4…...

centos 配置 git 连接 github

centos 配置 git 连接 github 首先安装 git 创建 ssh key ssh-keygen -t rsa复制公钥 cat ~/.ssh/id_rsa.pub # 打印出公钥内容然后复制配置 github 登录网页 github 账号&#xff1b;进入 setting&#xff1b;点击 SSH and GPG keys&#xff0c;点击 New SSH keytitile 随便填…...

SpringBoot发布项目到docker

Dockerfile FROM openjdk:11 # 作者 MAINTAINER chenxiaodong<2774398338qq.com># 安装 vim # RUN yum -y install vim# 环境变量 # 进入容器后的默认工作目录 ENV WORKPATH /usr/local/webapp ENV EXECFILE Docker2Application-0.0.1-SNAPSHOT.jarRUN mkdir -p $WORKPA…...

sheng的学习笔记-卷积神经网络

源自吴恩达的深度学习课程&#xff0c;仅用于笔记&#xff0c;便于自行复习 导论 1&#xff09;什么是卷积神经网络 卷积神经网络&#xff0c;也就是convolutional neural networks &#xff08;简称CNN&#xff09;&#xff0c;使用卷积算法的神经网络&#xff0c;常用于计…...

数据库:园林题库软件(《中国古代园林史》答题卷一 )

《中国古代园林史》答题卷一 填空题 1、中国古代园林曾被誉为“世界园林之母”。国际风景园林师联合会(IFLA)的创始人、著名风景园林师和教育家杰里柯爵士( Sir Geoffrey Alan Jellicoe)把中国古代园林和西亚园林以及古希腊园林列为世界三大园林体系之首。 2、中国古代园林是…...

upset 绘制

好久没有更新,今天来一个upset图的绘制 1.1 安装包 #绘制upset的包现在看来有三个 ## UpSet ### 最基本的upsetR包,使用方便,但是扩展不方便 devtools::install_github("hms-dbmi/UpSetR") ## complex-upset ### UpSet的升级款 支持ggplot2 devtools::install_git…...

声明 | 为打击假冒账号、恶意抄袭账号等诈骗活动,提升本账号权威,本博主特此郑重声明

声明 | 为打击假冒账号、恶意抄袭账号诈骗活动&#xff0c;提升本账号权威&#xff0c;本博主特此郑重声明 一、本账号为《机器学习之心》博主CSDN唯一官方账号&#xff0c;唯一联系方式见文章底部。 二、《机器学习之心》博主未授权任何第三方账号进行模型合作、程序设计、源…...

云计算:OpenStack 配置二层物理网卡为三层桥的接口

目录 一、理论 1.OpenStack 二、实验 1. Linux系统修改网卡 2.OpenStack 配置二层物理网卡为三层桥的接口 一、理论 1.OpenStack &#xff08;1&#xff09;概念 OpenStack是一个开源的云计算管理平台项目&#xff0c;是一系列软件开源项目的组合。由NASA(美国国家航空…...

Python sanic框架钉钉和第三方打卡机实现

同样还是需要开通钉钉应用这里就不错多说了 第一步:梳理逻辑流程 前提&#xff1a;打卡的机器是使用postgres数据库&#xff0c;由于因为某些原因&#xff0c;钉钉userId 我已经提前获取到了存放到数据库里。 1.用户打卡成功后&#xff0c;我们应该监听数据库进行查询&#xf…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...