上篇文章我们总结了大文件分片上传的主要核心，但是我对md5校验和上传进度展示这块也比较感兴趣，所以在deepseek的帮助下，扩展了一下我们的代码，如果有任何问题和想法，非常欢迎大家在评论区与我交流，我需要学习的地方也还有特别多~
开始之前我们先用一个通俗易懂的例子来理解我们的功能吧~
用快递寄大件包裹的思路，解释大文件分片上传的实现步骤
场景设定：
假设你要把一卡车的大米（5吨）从杭州运到北京，但遇到了几个现实问题：
1.整卡车运输风险大（爆胎就全完了）
2.中途可能有检查站需要抽检
3.运输途中网络信号时好时坏
解决方案的六个关键步骤：
第一步：货物预处理（preprocessFile）
动作：把大米分装成小袋，每袋贴上唯一编号
技术对应：
- 计算整个大米的MD5指纹（确保货物完整性）
- 生成专用加密包装袋（AES密钥)
为什么重要：
- 避免整车运输风险
- 方便中途抽检任意一袋
- 不同袋子用不同密码锁更安全
第二步：秒传核验（checkInstantUpload）
动作：打电话给北京仓库：“你们已经有5吨杭州大米了吗？”
技术对应：
- 发送MD5给服务端查询
- 如果已有相同货物，直接标记运输完成
省时技巧：
- 避免重复运输相同货物
- 节省90%运输时间
第三步：智能分箱（prepareChunks）
动作：根据路况决定每箱装多少袋
- 高速公路：用大箱子（装20袋）
- 山路：用小箱子（装5袋）
技术对应：
- 网络测速（检查"路况"）
- 动态调整分片大小
智慧之处：
- 好路况多装快跑
- 差路况少装稳走
第四步：分批运输（uploadAllChunks）
动作：
- 给每个箱子单独上锁（不同IV加密）
- 3辆货车同时出发（并发控制）
- 某辆车抛锚就换车重发（错误重试）
技术细节：
- 每个分片独立加密
- 失败分片自动重试3次
- 实时记录已送达的箱子
第五步：收件核验（mergeFile）
动作：
- 北京仓库收到所有箱子
- 按编号顺序拆箱组合
- 检查MD5是否匹配原始指纹
安全保障：
- 防止运输途中被调包
- 确保颗粒不少
第六步：断点续传（saveProgress）
突发情况处理：
- 遇到暴雨暂停运输
- 记录哪些箱子已送达
- 雨停后继续送未达的箱子
技术实现：
- 自动保存上传进度
- 支持从断点恢复
我们的智能方案为什么更优秀呢？
1.整车上路风险高，
化整为零更安全
2.每袋都有独立指纹和密码锁，防止被掉包
3.根据路况调整运输策略，堵车时不用干等
4.遇到检查要全部开箱时，可随机抽捡一袋不影响整体
5.重新发货不用从头开始，断点续传省时省力
所以我们其实是在上一篇大文件分片上传的过程中增加了两个功能：
秒传检查和合并校验
整体步骤是：
预处理->秒传检查->智能分片->加密运输->合并校验->断点保护
学习之前我们先来搞懂两个问题：
1.md5校验在我们文件上传过程中是必须的吗？
答案肯定是否，但有两个场景我们是必须要使用md5校验的（大方向）：秒传功能与文件完整性
| 场景 | 类比解释 | 技术对应 |
|---|---|---|
| 秒传功能 | 仓库发现已有同批次芒果，直接调库 | 服务端比对MD5跳过上传 |
| 防数据篡改 | 发现运输商偷换成越南芒果 | 合并后MD5与原始值比对 |
如果简单使用文件大小校验，或者严重依赖tpc传输确保文件不会丢失的情况下也是可以不使用md5校验的
2.md5校验与分片加密有什么关系？可以替代吗？
即使我们已经对每个分片进行了加密上传，仍然可以使用md5校验文件的完整性，分片加密与md5校验是互补而非替代。分片加密如同在生产线上为每个零件做防锈处理，而MD5校验如同在出厂前对整机进行质检——防锈处理不能替代最终质检，两者结合才能确保交付可靠的产品。
- 分片加密的作用
| 加密阶段 | 防护目标 | 示例风险 |
|---|---|---|
| 传输过程加密 | 防中间人窃听/篡改 | 黑客截获分片并修改 |
| 存储加密 | 防服务器数据泄露 | 数据库被拖库 |
- MD5校验的核心价值
| 校验场景 | 解决的问题 | 示例风险 |
|---|---|---|
| 加密前校验 | 源文件完整性 | 本地文件损坏 |
| 解密后校验 | 解密过程是否正确 | 密钥错误导致解密失败 |
| 合并校验 | 分片顺序/组合错误 | 分片序号错乱 |
所以如果（验证文件完整性中可能会发生的错误）
1.加密前的源文件已经损坏（加密传输后肯定有误）
2.密钥错误、IV丢失、解密算法不兼容等导致解密后数据错误
3.分片上传成功但合并顺序错乱
以上几种情况发生的时候我们是有必要进行md5校验的
首先看我们需要实现功能的完整思路与技术亮点吧~
完整实现思路（五阶段工作流）
1.初始化阶段
- 生成文件唯一ID（UUID v4）
- 配置分片大小范围（默认1MB~20MB）
- 初始化加密系统、分片存储结构
2.预处理阶段
- 并行执行：MD5计算 + 密钥生成（加速启动）
- 流式MD5：2MB分片渐进计算，避免内存溢出
- 密钥管理：使用Web Crypto API安全生成AES密钥
3.秒传校验
- 发送文件MD5到服务端查询
- 存在相同文件时直接跳过后续步骤
- 节省带宽和服务器存储空间
4.动态分片上传
- 网络测速：通过1MB测试文件探测当前带宽
- 智能分片：按带宽50%动态调整分片大小
- 加密传输：每个分片独立IV，AES-CBC加密
- 并发控制：3个并行上传通道（可配置）
- 重试机制：指数退避策略（2s, 4s, 8s）
5.收尾工作
- 发送合并请求到服务端
- 清理临时数据（可选）
- 持久化最终状态
架构亮点
网络自适应
- 三次测速取平均值减少误差
- 分片大小平滑过渡（避免剧烈波动）
安全传输
- 前端加密 + 服务端解密双保险
- 每个分片独立IV防止模式分析
- 密钥仅存于内存和加密存储
可靠性保障
- 断点续传：自动保存进度到IndexedDB
- 原子操作：分片上传成功后才标记完成
- 错误隔离：单个分片失败不影响整体流程
性能优化
- 并行预处理（MD5和密钥生成）
- 流式哈希计算（内存占用恒定）
- 浏览器空闲时段上传（可扩展）
以下是完整代码
/*** 四位一体的网络感知型大文件传输系统* * 动态分片策略
// 基于实时网络带宽的动态分片算法（1MB~20MB智能调节）
// 分片大小平滑调整机制（20%最大波动限制）
// 内存对齐优化（1MB粒度减少资源碎片）* 数据安全框架
// 三级校验体系：全文件MD5 + 分片级SHA256双哈希
// AES-CBC加密（分片独立IV防重放攻击）
// 密钥生命周期管理（生成->存储->使用隔离）* 传输可靠性保障
// 断点续传能力（IndexedDB持久化存储）
// 异常安全边界（try-catch包裹全流程）
// 分片原子化操作（独立元数据管理）* 性能优化工程
// 并行预处理流水线（MD5与密钥并行计算）
// 流式哈希计算（2MB分片递归处理）
// 网络测速基准（1MB测试包探测带宽）*//*** 大文件分片上传类（支持动态分片、加密、MD5校验）*/
class FileUploader {/*** 初始化上传实例* @param {File} file - 浏览器文件对象 * @param {Object} [options] - 配置参数*/constructor(file, options = {}) {// 必需参数this.file = file; // 上传文件对象this.fileId = this.generateFileId(); // 文件唯一标识this.fileMD5 = null; // 全文件MD5值// 分片管理this.chunks = []; // 全部分片数据this.uploadedChunks = new Set(); // 已上传分片索引this.ivMap = new Map(); // 加密初始化向量存储,存储每个分片的IV// 加密配置this.encryptionKey = null; // AES加密密钥// 性能参数this.lastUploadSpeed = 5 * 1024 * 1024; // 网络基准速度（默认5MB/s）// 用户配置this.options = {minChunkSize: 1 * 1024 * 1024, // 最小分片1MBmaxChunkSize: 20 * 1024 * 1024, // 最大分片20MB...options};// 事件系统this.events = {};}// --------------------------// 核心公共方法// --------------------------/*** 启动上传流程（完整工作流）* * @throws {Error} 上传过程中的错误*/async startUpload() {try {// 阶段1: 文件预处理（计算哈希 + 生成密钥）await this.preprocessFile();// 阶段2: 秒传检查（通过文件MD5判断是否需要传输）const needUpload = await this.checkInstantUpload();if (!needUpload) return;// 阶段3: 动态分片准备（根据网络状况生成分片）await this.prepareChunks();// 阶段4: 分片上传（含加密和重试机制）await this.uploadAllChunks();// 阶段5: 合并请求await this.mergeFile();this.emit('complete');} catch (error) {console.error('上传流程异常:', error);await this.saveProgress(); // 异常时保存进度this.emit('error', error);throw error;}}// --------------------------// 预处理阶段（含MD5计算）// --------------------------/*** 阶段1：文件预处理（计算MD5、生成密钥）*/async preprocessFile() {// 并行执行两个任务,实现异步流水线加速// SparkMD5库保障哈希计算准确性// Web Crypto API生成符合FIPS标准的AES密钥const [md5, key] = await Promise.all([this.calculateFileMD5(), // 计算全文件MD5this.generateAESKey() // 生成加密密钥]);this.fileMD5 = md5;this.encryptionKey = key;// 保存初始进度（可用于恢复）await this.saveProgress();}/*** 计算全文件MD5（分片计算避免内存溢出）* @returns {Promise<string>} MD5哈希值*/calculateFileMD5() {// 返回Promise对象实现异步计算流程控制return new Promise((resolve) => {// 定义分片大小（2MB兼顾计算效率与内存安全）const chunkSize = 2 * 1024 * 1024;// 计算总切片数量（向上取整保证最后分片完整性）const chunks = Math.ceil(this.file.size / chunkSize);// 初始化SparkMD5实例（专为ArrayBuffer优化的MD5计算库）const spark = new SparkMD5.ArrayBuffer();// 已处理分片计数器let processed = 0;// 定义分片加载递归函数,递归分片处理大文件（2MB粒度），避免内存溢出风险const loadNext = () => {// 计算当前分片字节范围const start = processed * chunkSize;const end = Math.min(start + chunkSize, this.file.size);// 切割文件对象获取当前分片Blobconst blob = this.file.slice(start, end);// 创建文件读取器处理二进制数据const reader = new FileReader();// 注册文件加载完成回调reader.onload = (e) => {// 将分片二进制数据追加到MD5计算流spark.append(e.target.result);// 更新已处理分片计数processed++;// 存储计算进度（格式：当前分片/总分片数）sessionStorage.setItem(`${this.fileId}_md5`, `${processed}/${chunks}`);// 触发进度事件this.emit('progress', {type: 'md5',value: processed / chunks});// 递归判断：未完成继续处理，完成则返回最终MD5processed < chunks ? loadNext() : resolve(spark.end());};// 启动分片数据读取（ArrayBuffer格式保持二进制精度）reader.readAsArrayBuffer(blob);};// 启动首个分片处理loadNext();});}/*** 阶段2：秒传验证（checkInstantUpload）* 实现逻辑： 将全文件MD5发送至服务端查询，若存在相同哈希文件，触发秒传逻辑，跳过后续流程直接返回成功* 业务价值:节省90%+重复文件传输成本;降低服务器存储冗余*//*** 🌟 秒传验证核心方法* @param {string} fileMD5 - 文件的完整MD5哈希值* @returns {Promise<boolean>} - 是否可秒传*/async checkInstantUpload(fileMD5) {try {const response = await fetch('/api/check-instant-upload', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ md5: fileMD5 })});if (!response.ok) throw new Error('秒传验证请求失败');const result = await response.json();return result.exists; // 服务端返回是否存在} catch (error) {console.error('秒传验证异常:', error);return false; // 失败时按需处理，此处默认继续上传}}// --------------------------// 分片处理阶段（含动态调整）// --------------------------/*** 阶段3：智能分片准备（动态调整分片大小）* 算法原理：基于实时测速结果（testNetworkSpeed）计算基准值引入历史速度惯性因子（lastUploadSpeed）平滑波动内存对齐优化提升分片处理效率*/async prepareChunks() {// 网络测速（取三次平均值）const speeds = [];for (let i = 0; i < 3; i++) {speeds.push(await this.testNetworkSpeed());}const currentSpeed = speeds.reduce((a, b) => a + b, 0) / speeds.length;// 计算动态分片大小（控制在配置范围内）let chunkSize = currentSpeed * 0.5; // 按带宽50%计算chunkSize = Math.max(this.options.minChunkSize,Math.min(this.options.maxChunkSize, chunkSize));// 生成分片元数据const totalChunks = Math.ceil(this.file.size / chunkSize);for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, this.file.size);this.chunks.push({index: i,blob: this.file.slice(start, end),size: end - start});}}
}/*** 阶段4：分片上传（uploadAllChunks）（并发控制 + 重试机制）* 加密流程生成随机IV（每个分片独立初始化向量）计算原始数据SHA256哈希AES-CBC加密分片数据生成加密后哈希（可选二次校验）* 传输策略Set数据结构记录已上传分片索引失败重试机制（需补充实现）并行上传控制（可扩展为连接池管理*/async uploadAllChunks() {// 设置并发数：浏览器环境下建议2-4个并行请求，平衡性能与稳定性const CONCURRENCY = 3;// 创建上传队列：通过展开运算符复制分片数组，避免直接操作原始数据const queue = [...this.chunks];// 主循环：持续处理直到队列清空while (queue.length > 0) {// 初始化当前批次的Promise容器const workers = [];// 提取当前批任务：每次取出CONCURRENCY数量的分片// splice操作会同时修改队列长度，实现队列动态缩减const currentBatch = queue.splice(0, CONCURRENCY);// 遍历当前批次的分片for (const chunk of currentBatch) {// 跳过已上传分片：通过Set检查避免重复上传if (this.uploadedChunks.has(chunk.index)) continue;// 将分片上传任务包装成Promise，加入workers数组workers.push(// 执行分片上传核心方法this.uploadChunk(chunk, chunk.index).then(() => {// 计算实时进度：已上传数 / 总分片数const progress = this.uploadedChunks.size / this.chunks.length;// 触发进度事件：通知外部监听者更新进度条this.emit('progress', { type: 'upload', value: progress });}));}// 等待当前批次全部完成（无论成功/失败）// 使用allSettled而非all保证异常不会中断整个上传流程await Promise.allSettled(workers);}
}/*** 单分片上传（含加密和重试机制）* @param {Object} chunk - 分片数据* @param {number} index - 分片索引* @param {number} retries - 剩余重试次数*/async uploadChunk(chunk, index, retries = 3) {try {// 加密处理（生成独立IV）const encryptedBlob = await this.encryptChunk(chunk.blob, index);// 构建表单数据const formData = new FormData();formData.append('file', encryptedBlob);formData.append('index', index);formData.append('iv', this.ivMap.get(index));// 上传请求const response = await fetch('/upload', {method: 'POST',body: formData});if (!response.ok) throw new Error(`HTTP ${response.status}`);this.uploadedChunks.add(index);} catch (error) {if (retries > 0) {await new Promise(r => setTimeout(r, 2000 * (4 - retries))); // 指数退避return this.uploadChunk(chunk, index, retries - 1);}throw new Error(`分片${index}上传失败: ${error.message}`);}
}/* ================= 加密模块 ================= *//** 生成AES-CBC加密密钥 */async generateAESKey() {return crypto.subtle.generateKey({ name: 'AES-CBC', length: 256 },true,['encrypt', 'decrypt']);
}/** 加密单个分片 */async encryptChunk(blob, index) {const iv = crypto.getRandomValues(new Uint8Array(16));const data = await blob.arrayBuffer();// 原始数据哈希校验const rawHash = await crypto.subtle.digest('SHA-256', data);// 执行加密const encrypted = await crypto.subtle.encrypt({ name: 'AES-CBC', iv },this.encryptionKey,data);// 存储加密参数this.ivMap.set(index, iv);return new Blob([encrypted], { type: 'application/octet-stream' });
}/* ================= 辅助方法 ================= *//** 网络测速（上传1MB测试文件） */async testNetworkSpeed() {const testBlob = new Blob([new Uint8Array(1 * 1024 * 1024)]);const start = Date.now();await fetch('/speed-test', {method: 'POST',body: testBlob});const duration = (Date.now() - start) / 1000;return (1 * 1024 * 1024) / duration; // 返回字节/秒
}/** 持久化上传进度 */async saveProgress() {const data = {fileId: this.fileId,chunks: this.chunks,uploadedChunks: [...this.uploadedChunks],encryptionKey: await crypto.subtle.exportKey('jwk', this.encryptionKey),ivMap: Object.fromEntries(this.ivMap)};await idb.setItem(this.fileId, data); // 假设使用IndexedDB
}/** 生成文件唯一ID */
generateFileId() {return crypto.randomUUID();
}/* ================= 事件系统 ================= */on(event, callback) {this.events[event] = callback;return this;
}emit(event, ...args) {const handler = this.events[event];handler && handler(...args);
}
}// ---------------------------- 使用示例 ----------------------------
const uploader = new FileUploader(file, {maxChunkSize: 50 * 1024 * 1024 // 自定义配置
});// 事件监听
uploader.on('progress', ({ type, value }) => {console.log(`${type}进度: ${(value * 100).toFixed(1)}%`);}).on('error', error => {console.error('上传失败:', error);});// 启动上传
uploader.startUpload();
)
