文件上传之大文件分块上传之断点续传操作

news2024/11/29 2:44:35

断点续传概念:

断点续传是一种网络的传输机制,用于在文件传输过程中出现中断或错误时,能够恢复传输而不必重新开始,它解决了网络不稳定连续中断或大文件传输时时间过长等问题。提高了文件传输时可靠和效率性。

断点续传需求:

  • 例如在网络不稳定的情况下,传输文件可能会出现中断,而断点续传可以帮助恢复传输,减少传输失败的影响。
  • 对于大文件的传输,从新开始传输会浪费大量的时间和带宽资源,而断点续传可以避免重新将整个文件进行传输操作。
  • 从用户体验方面来说,断点续传提供了更好的用户体验,因为用户不需要从头开始重新上传或下载文件,节省了时间和精力。

断点续传实现原理:

  • 基于文件的分块传输:文件被分块成多个固定大小的块,每个块都有一个唯一标识符 ,在传输的过程中,每一个块都会记录传输的状态信息,包括已经成功传输和未传输的块信息,当传输中断或失败时可以记录状态信息,确定哪一些块已经成功传输,那一些块还没有被进行传输处理。那么我们只需要去确定在传输过程中,传输失败的块的起始位置,然后需要从失败传送的块位置进行重新上传即可。对于已成功上传的块信息则不需要再次的处理。

断点续传的实现方式需要去注意几个核心的关键技术点:

(1)文件需要进行固定大小的分块处理,通常是几KB和几MB的大小。需要对每一块进行唯一标识符的处理。目的是为了跟踪块的传输状态。还需要进行状态值的记录,记录每个块传输的状态信息,包括已传输的块和未传输的块信息内容。

(2)控制操作:及时的记录已成功传输的块,在传输中断时保存已传输块和未传输块的状态信息,以便在恢复的时候进行确认。在传输恢复的时候,还需要去明确之前的一个状态信息,确保需要后续继续上传块内容,因为我们需要去确认从上一个中断的地方进行块的传输恢复。

断点续传有很多的优势:

最大的优势是节约时间和资源,因为断点续传可以避免重新传输整个文件,而且它还可以去提高可靠性,在网络不稳定的情况下,断点续传可以减少传输失败的影响,保证文件的完整和可靠性,用户体验也会提升。

不足之处:

在传输过程中,断点续传可能无法完全正确的恢复其传输的状态,需要额外的校验机制来解决这个问题。并且文件块大小也需要去控制,去选择,选择合适的文件块大小对断点续传有一定的影响,过小的块可能导致传输控制开销增大,过大的块可能会导致传输以后需要传输较大的数据量。

断点续传的实现:

首先回顾上两篇大文件分块上传的博客,查看 html 和 script 的部分内容

文件上传之大文件分块上传-CSDN博客

文件上传之大文件分块上传进度控制处理-CSDN博客

查看这两个博客去实现分块以及进度处理,在这个基础上去实现断点续传,根据刚才所说需要对分块的内容进行分块标识的设置

前端

html:
<input type="file" id="fileInput">
<progress value="0" max="100" id="progress"></progress>  //设置一个进度条
<button onclick="upload()">上传文件</button>
script:

(1)定义名称以及当前的索引值

const resumeKey = file.name + '-currentChunk'; // 用于断点续传的本地存储键名
const resumeIndex = localStorage.getItem(resumeKey); // 当前的索引值

(2)做个判断

因为当前我们并没有执行resumekey的操作,所以要写一个条件判断

假设:resumeIndex为null(不存在)的情况下,也就是说之前已经进行过文件的分块上传,但是因为一些特殊的原因,并没有成功处理,所以可以从本地存储当中获取到resumeIndex下标值。并赋值给当前块currentChunk。那么下一次从本地存储当中获取的index值进行后续的上传操作。否则会移除之前的resumekey值

if (resumeIndex != null) {
    currentChunk = parseInt(resumeIndex); // 如果存在已处理的分片索引,则更新currentChunk
} else {
    localStorage.removeItem(resumeKey); // 否则移除本地存储的键值对
}

(3)在while循环内进行本地存储的操作,因为当一个分片上传成功后,就去记录它的一个上传成功的标识符。并且当整个文件上传成功后,需要将resumeKey值从本地存储中进行移除。

localStorage.setItem(resumeKey,currentChunk);
localStorage.removeItem(resumeKey);

那么以上就实现了前端的一个分片上传,续传的一个功能实现。

运行代码,可以看到当出现异常情况后,我们就可以确认起始的上传块的索引位置应该就从当前已经上传成功的索引块位置开始。 

再次点击相同文件上传,则会确认已经进行断点续传的操作处理,那么服务器端也会对后续的块文件进行继续的断点续传操作,直到所有的块上传成功,并且产生一个文件合并的操作。

那么以上则是利用了本地存储的标识处理去完成了大文件分块上传的断点续传操作

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

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

相关文章

浅谈js事件机制

事件是什么&#xff1f;事件模型&#xff1f; 原始事件模型&#xff08;DOM0级&#xff09; HTML代码中指定属性值&#xff1a;在js代码中指定属性值&#xff1a;优点&#xff1a;缺点&#xff1a; IE 事件模型DOM2事件模型 对事件循环的理解 宏任务&#xff08;Macrotasks&…

【Linux】软件包管理器 yum | vim编辑器

前言: 软件包管理器 yum和vim编辑器讲解 文章目录 软件包管理器 yum编辑器-vim四种模式普通模式批量化注释和批量化去注释末行模式临时文件 软件包管理器 yum yum&#xff08;Yellowdog Updater, Modified&#xff09;是一个在基于 RPM&#xff08;管理软件包的格式和工具集合&…

电影《社交网络》带来的深层次的思考

《社交网络》是由大卫芬奇执导&#xff0c;杰西艾森伯格、安德鲁加菲尔德、贾斯汀汀布莱克等主演的剧情片&#xff0c;于2010年10月8日在美国上映。该片讲述了马克扎克伯格和埃德华多萨瓦林两人如何建立和发展Facebook的故事。 学习关键点&#xff1a; 创业精神&#xff1a;电…

C++opencv图像算数操作-加减乘除

quick_opencv.h #include<opencv2\opencv.hpp> using namespace cv; class QuickDemo{public:void operators_demo(Mat &image);//图像算数操作 };QuickDemo.cpp #include<quick_opencv.h>//图像算数操作 void QuickDemo::operators_demo(Mat &image) {M…

八、计算机视觉-边界填充

文章目录 前言一、原理二、具体的实现 前言 在Python中使用OpenCV进行边界填充&#xff08;也称为zero padding&#xff09;是一种常见的图像处理操作&#xff0c;通常用于在图像周围添加额外的像素以便进行卷积或其他操作。下面是使用OpenCV进行边界填充的基本原理和方法 一…

解决elementUI固定列后,下方多了一条横线的问题

最近遇到一个bug,如下图,el-table的操作列使用fixed属性固定后,下方多了一条横线: 我们将样式设置高优先,以覆盖内联样式,如下是less里使用穿透样式解决的办法: <style lang="less" scoped> /deep/ .el-table__fixed-right {height: 100

vulvhub-----Hacker-KID靶机

打靶详细教程 1.网段探测2.端口服务扫描3.目录扫描4.收集信息burp suite抓包 5.dig命令6.XXE漏洞读取.bashrc文件 7.SSTI漏洞8.提权1.查看python是否具备这个能力2.使用python执行exp.py脚本&#xff0c;如果提权成功&#xff0c;靶机则会开放5600端口 1.网段探测 ┌──(root…

用户中心 -- 快捷键使用

一、后端&#xff0c;软件 idea 1.1 代码如何写出 网址&#xff1a;用户管理 --汇总 -- 明细-CSDN博客 1.2 一键调整代码格式的快捷键 网址&#xff1a; 用户管理第2节课 -- idea 2023.2 创建表--【本人】-CSDN博客

OpenCV DNN 活体检测项目环境配置等各阶段tips

date: 2020-09-22 14:53 资料来源《OpenCV深度学习应用与性能优化实践》第八章。 在复现这个项目的时候发现一些可以调整的小tips。 环境配置阶段 使用conda 创建python 工作环境时&#xff0c;注释掉requirems.txt 里的opencv-python-inference-engine4.1.2.1&#xff0c;安…

php美女写真视频管理源码 PHPCMS视频写真管理系统源码

国内首家CMS视频写真管理系统&#xff01; 三大模块&#xff0c;视频模块&#xff0c;图片模块&#xff0c;资讯模块。 全方面解决了多元素运营方案。采用CI框架核心开发&#xff0c;体积小、运行快&#xff0c;强大缓存处理。 视频采用了云转码服务将不同的视频来源、不同的…

强化学习(TD3)

TD3——Twin Delayed Deep Deterministic policy gradient 双延迟深度确定性策略梯度 TD3是DDPG的一个优化版本&#xff0c;旨在解决DDPG算法的高估问题 优化点&#xff1a; ①双重收集&#xff1a;采取两套critic收集&#xff0c;计算两者中较小的值&#xff0c;从而克制收…

KMS密钥管理有哪些安全功能

KMS(Key Management Service)密钥管理服务是一种专门用于管理和保护加密密钥的系统。在现代的信息安全领域中&#xff0c;密钥的重要性不言而喻&#xff0c;它是确保数据加密、解密以及身份验证等安全操作的核心要素。KMS的出现&#xff0c;极大地提高了密钥管理的效率和安全性…

跨境云手机如何简化tiktok运营流程

如今&#xff0c;tiktok已经成为世界范围内都非常流行的社交媒体平台。然而在大多数情况下&#xff0c;由于网络原因&#xff0c;tiktok无法在国内使用&#xff0c;但依然有越来越多的人注册tiktok号码、建立tiktok矩阵。原因是tiktok仍然有大量的流量可供商业使用&#xff0c;…

CSP-201812-1-小明上学

CSP-201812-1-小明上学 解题思路 #include <iostream> using namespace std; int main() {int red, yellow, green, n, timeSum 0;cin >> red >> yellow >> green;cin >> n;for (int i 0; i < n; i){int flag, time;cin >> flag &g…

Spark---环境搭建---入门概念

目录 环境搭建 测试 Apache Spark是用于大规模数据处理的统一分析引擎&#xff1b; spark 仅仅替代了hadoop的mapraduce&#xff1b; spark比hadoop快一百倍&#xff1b; 环境搭建 1&#xff1a;解压&#xff1b; 2&#xff1a;配置spark环境变量&#xff1a; vim /etc/pro…

WouoUI-PageVersion 一个用于快速构建具有丝滑OLED_UI动画的项目

WouoUI-PageVersion 写在前面 简介&致谢 Air001的TestUI例子的b站的演示视频 Air001的LittleClock例子的b站演示视频: https://www.bilibili.com/video/BV1J6421g7H1/ Stm32的TestUI例子的b站演示视频: https://www.bilibili.com/video/BV1mS421P7CZ/ 所有演示的工程文…

【6-1】使用hanlp进行实体抽取以及句法分析(问题待解决)

1.使用hanlp抽取法人名称、企业名称等信息 # -*- coding: utf-8 -*- from pyhanlp import *text1"1998年11月11日&#xff0c;马化腾和同学张志东在广东省深圳市正式注册成立“深圳市腾讯计算机系统有限公司”&#xff0c;之后许晨晔、陈一丹、曾李青相继加入。当时公司…

缩小ppt文件大小的办法

之前用别人模版做了个PPT&#xff0c;100多M,文件存在卡顿问题 解决办法&#xff1a; 1.找到ppt中哪个文件过大&#xff0c;针对解决 2.寻找视频/音频文件&#xff0c;减少体积 3.字体文件是不是过多的问题。 一、文件寻找的内容步骤&#xff1a; 步骤&#xff1a; 1.把p…

MySQL数据库基础(九):SQL约束

文章目录 SQL约束 一、主键约束 二、非空约束 三、唯一约束 四、默认值约束 五、外键约束&#xff08;了解&#xff09; 六、总结 SQL约束 一、主键约束 PRIMARY KEY 约束唯一标识数据库表中的每条记录。主键必须包含唯一的值。主键列不能包含 NULL 值。每个表都应该有…

【Pygame手册03/20】用于绘制形状的 pygame 模块

目录 一、说明二、画图函数2.1 接口draw下的函数2.2 pygame.draw.rect()2.3 pygame.draw.polygon()2.4 pygame.draw.circle()2.5 pygame.draw.ellipse()2.6 pygame.draw.arc()2.7 pygame.draw.line ()2.8 pygame.draw.lines()2.9 pygame.draw.aaline()2.10 pygame.draw.aaline…