大文件切片上传 So Easy?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

大家好,我是大澈!

本文约 1100+ 字,整篇阅读约需 2 分钟。

大文件切片上传,我一般会分为4步来搞:文件切片-计算哈希值-上传管理-上传完成合并验证。其中,上传管理又可以包括:切片上传验证、上传进度记录、断点续传。

今天分享一段优质 JS 代码片段,就是关于大文件切片上传的第3部分,上传管理的简单实现。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

async function uploadFile(file, url) {const chunkSize = 10 * 1024 * 1024; // 10 MBconst chunks = fileToChunks(file, chunkSize);const chunkHashes = await getChunksHashes(chunks);const uploadedChunks = new Set(JSON.parse(localStorage.getItem(file.name)) || []);for (let i = 0; i < chunks.length; i++) {if (uploadedChunks.has(i)) {console.log(`Chunk ${i} already uploaded`);continue;}const formData = new FormData();formData.append('chunk', chunks[i]);formData.append('hash', chunkHashes[i]);formData.append('index', i);formData.append('filename', file.name);const response = await fetch(url, {method: 'POST',body: formData,});if (response.ok) {uploadedChunks.add(i);localStorage.setItem(file.name, JSON.stringify([...uploadedChunks]));} else {throw new Error(`Failed to upload chunk ${i}`);}}console.log('All chunks uploaded successfully');
}async function getChunksHashes(chunks) {const spark = new SparkMD5.ArrayBuffer();const hashes = [];for (const chunk of chunks) {const hash = await new Promise((resolve) => {const reader = new FileReader();reader.onload = (event) => {spark.append(event.target.result);resolve(spark.end());};reader.readAsArrayBuffer(chunk);});hashes.push(hash);}return hashes;
}

分享原因

这段代码展示了如何在浏览器中实现文件分片上传和断点续传的功能。

通过将文件分成多个小片段逐个上传,同时利用本地存储记录上传进度,以确保在网络中断或其他原因导致上传失败的情况下,可以继续上传未完成的部分。

代码解析

1. uploadFile 函数

这个函数的目的是:将文件分片并逐片上传,同时记录上传进度以便于断点续传。

chunkSize:定义每个分片的大小,这里是10MB。

chunks:将文件分成多个分片。

chunkHashes:计算每个分片的哈希值,用于校验分片完整性。

uploadedChunks:从本地存储中读取已上传的分片索引,避免重复上传。

遍历分片,检查当前分片是否已经上传,若已上传则跳过。

创建 FormData 对象并添加分片数据、哈希值、索引和文件名,使用 fetch 将分片上传至服务器。

若上传成功,将当前分片索引记录到 uploadedChunks 中并存储到本地存储。

2. getChunksHashes 函数

这个函数的目的是:定义计算文件各个分片的哈希值,以确保上传过程中数据的完整性。

创建 SparkMD5.ArrayBuffer 实例,用于生成 MD5 哈希。

遍历分片,使用 FileReader 读取每个分片的内容并计算其哈希值。

将每个分片的哈希值存储在 hashes 数组中。

- end -

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

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

相关文章

liosam编译问题

编译过程 因为lego安装时已经安装了gtsam因子图优化库,所以不需要再安装 直接编译即可 catkin_make -j8 报错实例 示例:[lio_sam_imuPreintegration-2] process has died,[lio_sam_mapOptmization-5] process has died 解决方法 实际问题是库文件libmetis.so 的位置。…

数据结构与算法:顺序表和链表

目录 一、线性表 二、顺序表 三、链表 一、线性表 线性表&#xff08; linear list &#xff09;是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线…

MyBatis框架学习笔记(一):MyBatis入门

1 MyBatis 介绍 1.1 官方文档 MyBatis 中文手册&#xff1a; &#xff08;1&#xff09;https://mybatis.org/mybatis-3/zh/index.html &#xff08;2&#xff09;https://mybatis.net.cn/ Maven 仓库&#xff1a; https://mvnrepository.com/ 仓库作用&#xff1a;需要…

(三)前端javascript中的数据结构之集合

集合的特点 1.无序 2.唯一性 3.不可重复 集合相对于前面几种数据结构&#xff0c;比较简单好理解&#xff0c;看看代码实现就能知道他的用法了 集合的创建 function MySet() {this.item {}; } MySet.prototype.has function (value) {return value in this.item; };//增 M…

编程范式之函数式编程

目录 前言1. 函数式编程的定义2. 函数式编程的特点2.1 纯函数2.2 不可变性2.3 高阶函数2.4 惰性求值 3. 函数式编程的应用场景3.1 并行计算3.2 数据分析3.3 Web开发 4. 函数式编程的优缺点4.1 优点4.2 缺点 5. 代表性的编程语言5.1 Haskell5.2 Scala5.3 Clojure 6. 示例代码结语…

Java中常见的消息中间件有哪些,各自的优缺点是那些?

1、ActiveMQ 优点&#xff1a; Apache基金会开发的开源消息中间件&#xff0c;支持JMS规范。 提供多种集群模式和高可用机制。 易于使用&#xff0c;并且与多种编程语言交互良好。 缺点&#xff1a; 在处理大量消息和并发连接时&#xff0c;性能可能不如其他中间件。 对于大型…

状态模式在金融业务中的应用及其框架实现

引言 状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;它允许对象在内部状态改变时改变其行为。状态模式通过将状态的相关行为分离到独立的状态类中&#xff0c;使得状态转换更加明确和简洁。在金融业务中&#xff0c;状态模式可以用于实现交易状…

legoloam算法环境配置和调试笔记

安装gtsam 参考 Ubuntu20.04安装gtsam记录_gtsam安装-CSDN博客 mkdir buildcd buildcmake .. make -

简谈设计模式之设计原则

设计模式是软件工程中解决特定问题的通用解决方案。这些模式提供了设计结构和最佳实践&#xff0c;帮助开发者创建灵活、可重用和可维护的代码。 设计模式分类 创建型模式 用于描述"如何创建对象", 它的特点是“将对象的创建和使用分离”. 包括单例, 原型, 工厂方…

负载均衡(Load Balancing)、集群(Cluster)和分布式(Distributed)

负载均衡&#xff08;Load Balancing&#xff09; 定义&#xff1a;负载均衡是指将网络流量或计算任务均匀地分配到多个服务器或计算资源上&#xff0c;以提高系统的整体处理能力、可靠性和响应速度。 特点&#xff1a; 流量分配&#xff1a;负载均衡器根据一定的算法&#x…

HTML5新增的input元素属性:placeholder、required、autofocus、min、max等

HTML5 大幅度地增加与改良了 input 元素的属性&#xff0c;可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 下面将详细介绍这些新增的 input 元素的属性。 属性说明属性说明placeholder在输入框显示描述性或提示性文本list为文本框添加选…

React+TS前台项目实战(二十七)-- 首页响应式构建之banner、搜索、统计模块布局

文章目录 前言一、 效果展示二、相关模块1. Statistic统计模块功能分析代码详细注释使用方式 2. Search搜索模块功能分析代码详细注释使用方式 3. banner模块功能分析代码详细注释使用方式 总结 前言 前面我们已经封装了这个项目基本要用到的全局组件了&#xff0c;现在就开始…

ScreenAI ——能理解从信息图表到用户界面的图像和文本算法解析

概述 论文地址&#xff1a;https://arxiv.org/pdf/2402.04615.pdf 信息图表&#xff08;图表、示意图、插图、地图、表格、文档布局等&#xff09;能够将复杂的数据和想法转化为简单的视觉效果&#xff0c;因此一直以来都被视为传播的重要元素。这种能力来自于通过布局和视觉线…

在Pycharm中把jupyter notebook转换成md格式

在Pycharm的控制台输入&#xff1a; jupyter nbconvert --to markdown filename.ipynb这里实际上是用的nvconvert 同理&#xff0c;如果是在vscode中写jupyter&#xff0c;也可以用&#xff1a; jupyter nbconvert --to FORMAT notebook.ipynb将其变成ipynb文件&#xff08;…

普通人必看!AI绘画商业变现全攻略(附教程)

大部分的设计师除了主业以外&#xff0c;都会利用空余时间去接单做副业。 单子包括但不限于产品/品牌LOGO、电商产品图设计、海报、室内设计图等等&#xff0c;单价在几十到上千不等 引起了我的思考&#xff0c;我们普通人有没有机会&#xff0c;也能像他们一样去接单赚钱吗&a…

pytorch- RNN循环神经网络

目录 1. why RNN2. RNN3. pytorch RNN layer3.1 基本单元3.2 nn.RNN3.2.1 函数说明3.2.2 单层pytorch实现3.2.3 多层pytorch实现 3.3 nn.RNNCell3.3.1 函数说明3.3.2 单层pytorch实现3.3.3 多层pytorch实现 4.完整代码 1. why RNN 以淘宝的评论为例&#xff0c;判断评论是正面…

Jackson中ObjectMapper

文章目录 概要ObjectMapper常用方法将Java对象转换为JSON字符串从JSON字符串转换为Java对象读取JSON文件并解析为树结构 概要 ObjectMapper 是 Jackson 数据处理库的核心类&#xff0c;用于将 Java 对象转换为 JSON&#xff0c;以及将 JSON 转换为 Java 对象。 ObjectMapper常…

matplotlib颜色对照表

matplotlib的色彩设置: #------------------------------------------------------------------------------------------------------------------------------- #-------------------------------------------------------------------------------------------------------…

【JavaWeb】登录校验-会话技术(二)JWT令牌

JWT令牌 介绍 JWT全称&#xff1a;JSON Web Token &#xff08;官网&#xff1a;https://jwt.io/&#xff09; 定义了一种简洁的、自包含的格式&#xff0c;用于在通信双方以json数据格式安全的传输信息。由于数字签名的存在&#xff0c;这些信息是可靠的。 简洁&#xff1a…

vue和react你怎么选择?

在选择Vue和React之间&#xff0c;其实没有一个绝对的“最佳选择”&#xff0c;因为这取决于你的项目需求、团队熟悉度、开发环境、以及你对这两个框架的个人偏好。下面是一些可以帮助你做出决策的因素&#xff1a; 1. 学习曲线 Vue&#xff1a;Vue的学习曲线相对平缓&#xf…