HTML5文件分片加密上传核心是前端切片、本地加密、分片上传+服务端合并校验三步协同，实现“边切边加、每片独立可验、服务端不接触明文密钥”。
HTML5 实现文件分片加密上传，核心在于三步协同：前端切片、本地加密、分片上传+服务端合并校验。关键不是“先传再加”或“全量加密后传”，而是“边切边加、每片独立可验、服务端不接触明文密钥”。
一、前端分片：用 Blob.slice() 控制粒度
避免一次性读取大文件导致内存溢出。通过 File 对象（来自 input[type="file"]）调用 slice() 方法按固定大小（如 2MB）切片：
- 推荐分片大小在 1–5MB 之间，兼顾网络稳定性与并发效率
- 记录每片序号（
chunkIndex）、总片数（totalChunks）、原始文件名与哈希标识（如fileId = md5(fileName + fileSize)） - 注意：不同浏览器对
Blob.slice()参数支持一致，但需统一使用start和end字节偏移，而非length
二、本地加密：Web Crypto API + 非对称密钥协商
不硬编码密钥，不传输原始密钥。采用「对称加密数据 + 非对称加密密钥」混合模式：
- 生成随机 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；公钥更新需配合版本号；前端加密失败应降级提示而非静默跳过。真正安全的上传，始于浏览器内，止于服务端不解密。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
