网站首页 > 开源技术 正文
本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!
大家好,我是大澈!
本文约 1100+ 字,整篇阅读约需 2 分钟。
大文件切片上传,我一般会分为4步来搞:文件切片-计算哈希值-上传管理-上传完成合并验证。其中,上传管理又可以包括:切片上传验证、上传进度记录、断点续传。
今天分享一段优质 JS 代码片段,就是关于大文件切片上传的第3部分,上传管理的简单实现。
老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!
async function uploadFile(file, url) {
const chunkSize = 10 * 1024 * 1024; // 10 MB
const 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 -
猜你喜欢
- 2024-10-07 第68节 Ajax-Web前端开发之JavaScript-零点程序员-王唯
- 2024-10-07 在 Flask 中处理表单和用户输入(魔兽世界收到名字叫表单处理提醒的私信)
- 2024-10-07 layer全选反选,弹窗+表单+验证组合代码实例
- 2024-10-07 Typora图片自动上传七牛云图床插件整合
- 2024-10-07 web前端程序员,面试必备9种跨域产生原因和解决方案,附资料
- 2024-10-07 Axios Promise 的 HTTP 库使用详细介绍
- 2024-10-07 Vu3+Ts+Vite2+Pinia 搭建开发脚手架
- 2024-10-07 axios学习教程全攻略(axios入门)
- 2024-10-07 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-10-07 手把手详细教程:程序猿必备调试工具postman
你 发表评论:
欢迎- 最近发表
-
- 后端服务太慢?试试这 7 招(后端 服务端 区别)
- 做一个适合二次开发的低代码平台,把程序员从curd中解脱出来-1
- Caffeine缓存 最快缓存 内存缓存(caffeine缓存使用)
- Java性能优化的10大策略(java性能调优从哪几个方面入手)
- New Balance M576PGT 全新配色设计
- x-cmd pkg | qrencode - 二维码生成工具
- 平和精英抽奖概率是多少 平和精英抽奖物品一览
- x-cmd pkg | tmux - 开源终端多路复用器(terminal multiplexer)
- 漫威官方App中文版上线:全站漫画限时免费
- macOS Monterey 12.7.4 (21H1123) 正式版发布,ISO、IPSW、PKG 下载
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)