大文件分片上传与断点续传实现指南

---

目录

1. 核心原理
2. 前端实现
3. 后端实现
4. 时序图
5. 优化与注意事项

---

1. 核心原理

1.1 分片上传

• 将大文件切割为多个小分片（如 5MB/片）
• 并行上传分片，提升传输效率

1.2 断点续传

• 通过文件哈希值唯一标识文件
• 记录已上传分片索引
• 网络中断后跳过已传分片

1.3 自动合并

• 服务器检测分片完整性
• 按序号合并分片生成完整文件

---

2. 前端实现

2.1 文件分片与哈希计算

// 文件分片
function splitFile(file, chunkSize = 5 * 1024 * 1024) {
    const chunks = [];
    let start = 0;
    while (start < file.size) {
        chunks.push(file.slice(start, start + chunkSize));
        start += chunkSize;
    }
    return chunks;
}

// 计算文件哈希（使用 SparkMD5）
async function calculateFileHash(file) {
    // ...（同前文实现）
}

2.2 上传控制（带并发限制）

class Uploader {
    constructor() {
        this.MAX_CONCURRENT = 3; // 最大并发数
        this.retryLimit = 3; // 分片重试次数
    }

    async upload(file) {
        const fileHash = await calculateFileHash(file);
        const { uploadedChunks } = await checkProgress(fileHash);

        const chunks = splitFile(file);
        const queue = chunks
            .map((chunk, index) => ({ chunk, index }))
            .filter(({ index }) => !uploadedChunks.includes(index));

        // 并发控制
        while (queue.length > 0) {
            const tasks = queue.splice(0, this.MAX_CONCURRENT);
            await Promise.all(tasks.map((task) => this.uploadChunk(task)));
        }
    }

    async uploadChunk({ chunk, index }) {
        for (let attempt = 0; attempt < this.retryLimit; attempt++) {
            try {
                const formData = new FormData();
                formData.append('chunk', chunk);
                formData.append('hash', fileHash);
                formData.append('index', index);

                await fetch('/api/upload', { method: 'POST', body: formData });
                saveProgress(fileHash, index);
                return;
            } catch (error) {
                if (attempt === this.retryLimit - 1) throw error;
            }
        }
    }
}

---

3. 后端实现

3.1 接口设计

端点	方法	功能
/api/upload	POST	上传分片
/api/progress	GET	查询上传进度
/api/merge-check	GET	检查合并状态（可选）

3.2 核心逻辑

// 分片存储结构
uploads/
├─ {fileHash}/
│  ├─ 0
│  ├─ 1
│  └─ ... (分片文件)

// 自动合并实现
app.post('/api/upload', (req, res) => {
  const { hash, index, total } = req.body;

  // 存储分片
  saveChunk(hash, index, req.file);

  // 检查合并条件
  if (isUploadComplete(hash, total)) {
    mergeChunks(hash); // 异步执行合并
  }

  res.sendStatus(200);
});

// 合并操作（异步）
async function mergeChunks(hash) {
  const chunkDir = path.join(UPLOAD_DIR, hash);
  const chunks = fs.readdirSync(chunkDir).sort((a, b) => a - b);

  await new Promise((resolve) => {
    const writeStream = fs.createWriteStream(`${UPLOAD_DIR}/${hash}.file`);
    chunks.forEach(chunk => {
      writeStream.write(fs.readFileSync(path.join(chunkDir, chunk)));
      fs.unlinkSync(path.join(chunkDir, chunk)); // 删除分片
    });
    writeStream.end(() => {
      fs.rmdirSync(chunkDir);
      resolve();
    });
  });
}

---

4. 时序图

---

5. 优化与注意事项

5.1 性能优化

• 分片大小调整：根据网络状况动态调整分片大小（1MB~10MB）
• 内存管理：使用流式处理避免大文件内存溢出
• CDN加速：分片上传使用不同CDN节点

5.2 可靠性保障

• 分片校验：对每个分片进行MD5校验
• 断点记录：使用IndexedDB存储本地进度
• 过期清理：服务器定时清理未完成的上传任务

5.3 安全防护

• 身份验证：上传接口添加JWT校验
• 大小限制：限制单文件最大尺寸（如10GB）
• 防重放攻击：分片上传添加时间戳签名

5.4 扩展功能

• 进度恢复：页面刷新后自动恢复上传
• 秒传功能：服务器存在相同哈希文件时直接返回
• 分片压缩：在客户端对分片进行gzip压缩

---

通过以上方案，可实现支持百万级大文件上传、网络中断自动恢复、服务器负载均衡的高可靠性文件上传系统。实际部署时建议结合对象存储（如AWS S3）实现分片直传，进一步降低服务器压力。