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;公钥更新需配合版本号;前端加密失败应降级提示而非静默跳过。真正安全的上传,始于浏览器内,止于服务端不解密。










