HTML5怎样实现文件分片加密上传_HTML5分片上传加密方案【撷华】_技术教程

HTML5文件分片加密上传核心是前端切片、本地加密、分片上传+服务端合并校验三步协同，实现“边切边加、每片独立可验、服务端不接触明文密钥”。

HTML5 实现文件分片加密上传，核心在于三步协同：前端切片、本地加密、分片上传+服务端合并校验。关键不是“先传再加”或“全量加密后传”，而是“边切边加、每片独立可验、服务端不接触明文密钥”。

避免一次性读取大文件导致内存溢出。通过 File 对象（来自 input[type="file"]）调用 slice() 方法按固定大小（如 2MB）切片：

推荐分片大小在 1–5MB 之间，兼顾网络稳定性与并发效率
记录每片序号（chunkIndex）、总片数（totalChunks）、原始文件名与哈希标识（如 fileId = md5(fileName + fileSize)）
注意
：不同浏览器对 Blob.slice() 参数支持一致，但需统一使用 start 和 end 字节偏移，而非 length

不硬编码密钥，不传输原始密钥。采用「对称加密数据 + 非对称加密密钥」混合模式：

生成随机 AES-GCM 密钥（crypto.subtle.generateKey("AES-GCM", true, ["encrypt", "decrypt"])）用于当前分片加密
用服务端预发的公钥（RSA-OAEP 或 ECDSA-P256 公钥）加密该 AES 密钥，随分片一起上传
每片使用唯一 IV（12 字节），并附带 GCM 认证标签（authTag），保障完整性与机密性
敏感操作（如密钥生成/导出）必须在安全上下文（HTTPS）中执行，否则 API 被禁用

每个分片以 POST /upload/chunk 发起，携带必要元数据与加密载荷：

请求头含 X-File-ID、X-Chunk-Index、X-Total-Chunks，便于服务端识别归属
请求体为 FormData：包含 encryptedChunk（Uint8Array 转 Blob）、encryptedKey（Base64）、iv、authTag、fileName（加密前原始名，可选 AES 加密后上传）
前端对整个分片请求计算轻量签名（如 HMAC-SHA256(fileId + chunkIndex + timestamp)，密钥由登录态派生），服务端校验防重放
服务端收到后仅存储加密分片及元数据，不尝试解密；待全部分片就位，触发合并前校验所有 authTag 有效性

用户刷新或网络中断后能精准续传，不重复、不遗漏：

上传前先发 HEAD /upload/status?fileId=xxx 查询已传分片索引列表
前端比对本地分片序号，跳过已成功响应（HTTP 200 + 正确 JSON 校验）的片
服务端对每个分片存储需包含：file_id、chunk_index、size、created_at、auth_tag_hash（SHA256(authTag)），用于幂等判断与完整性追溯
合并时按序拼接密文，用对应密钥+IV+authTag 解密每片，任一片失败则整份拒绝，返回具体错误片号

不复杂但容易忽略：密钥生命周期必须严格管控——AES 密钥绝不复用、不跨片、不缓存到 localStorage；公钥更新需配合版本号；前端加密失败应降级提示而非静默跳过。真正安全的上传，始于浏览器内，止于服务端不解密。