表单中的大文件分片上传与断点续传实现解析

在Web开发中，表单是网页与用户交互的核心元素，而 <input type="file"> 标签常被用于文件选择。当涉及大文件上传时，直接一次性提交往往会导致超时、网络中断甚至浏览器卡顿。为解决这一问题，业界普遍采用分片上传与断点续传的方案。

一、分片上传的原理

分片上传的核心思路是将一个大文件切分为若干较小的片段（chunk），每个片段独立上传至服务器，再由服务器合并为完整文件。这样能降低单次请求的数据量，提升传输稳定性，并便于错误重试。

• 前端切片：利用 File API 读取文件对象，通过 Blob.slice 方法按固定大小切割。

• 并发控制：可限制同时上传的分片数量，避免过多请求占用带宽。

• 唯一标识：为每个文件生成 hash 或唯一 ID，用于后端识别同一文件的不同分片。

• 服务端合并：所有分片上传完成后，服务器按序拼接还原成原始文件。

二、断点续传的实现方式

断点续传依赖对已上传分片状态的记录。若上传过程中断，可在重新连接后查询已成功接收的分片列表，跳过这些分片，仅上传缺失部分。

• 状态记录：服务器端保存每个文件的上传进度（如已接收的分片序号集合）。

• 续传触发：客户端在上传前先请求该文件的上传状态，根据返回结果决定从哪一片段开始发送。

• 容错机制：单个分片上传失败时可自动重试数次，提高成功率。

三、前端实现示例

下面以 JavaScript 为例演示分片与断点续传的基本流程，假设每片大小为 1MB，并使用 Fetch API 进行上传。

// 选取文件
const fileInput = document.querySelector('input[type=file]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const CHUNK_SIZE = 1024 * 1024; // 1MB
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
  const fileId = await computeFileHash(file); // 自定义函数，生成文件唯一标识

  // 获取已上传分片
  const res = await fetch('https://www.ipipp.com/upload/status?fileId=' + fileId);
  const { uploadedChunks } = await res.json();

  for (let i = 0; i < totalChunks; i++) {
    if (uploadedChunks.includes(i)) continue; // 跳过已上传分片

    const start = i * CHUNK_SIZE;
    const end = Math.min(start + CHUNK_SIZE, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('fileId', fileId);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('chunk', chunk);

    // 上传分片
    await fetch('https://www.ipipp.com/upload/chunk', {
      method: 'POST',
      body: formData
    });
  }

  // 通知合并
  await fetch('https://www.ipipp.com/upload/merge', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fileId, totalChunks })
  });
});

四、后端实现要点

后端需提供三个核心接口：

以 Node.js 伪代码说明分片存储与合并逻辑：

const fs = require('fs');
const path = require('path');

// 临时目录
const TMP_DIR = path.join(__dirname, 'tmp');
if (!fs.existsSync(TMP_DIR)) fs.mkdirSync(TMP_DIR);

// 记录已上传分片
const uploadMeta = {}; // 可用数据库替代

app.get('/upload/status', (req, res) => {
  const { fileId } = req.query;
  const uploaded = uploadMeta[fileId] || [];
  res.json({ uploadedChunks: uploaded });
});

app.post('/upload/chunk', (req, res) => {
  const { fileId, chunkIndex } = req.body;
  const chunkFile = path.join(TMP_DIR, `${fileId}-${chunkIndex}`);
  
  // 保存分片流
  const ws = fs.createWriteStream(chunkFile);
  req.on('data', (chunk) => ws.write(chunk));
  req.on('end', () => {
    ws.end();
    if (!uploadMeta[fileId]) uploadMeta[fileId] = [];
    if (!uploadMeta[fileId].includes(Number(chunkIndex))) {
      uploadMeta[fileId].push(Number(chunkIndex));
    }
    res.sendStatus(200);
  });
});

app.post('/upload/merge', (req, res) => {
  const { fileId, totalChunks } = req.body;
  const filePath = path.join(__dirname, 'uploads', fileId);
  const ws = fs.createWriteStream(filePath);

  for (let i = 0; i < totalChunks; i++) {
    const chunkPath = path.join(TMP_DIR, `${fileId}-${i}`);
    const data = fs.readFileSync(chunkPath);
    ws.write(data);
    fs.unlinkSync(chunkPath); // 删除临时分片
  }
  ws.end();
  delete uploadMeta[fileId];
  res.sendStatus(200);
});

五、注意事项与优化方向

• 文件 Hash 计算：可使用 SparkMD5 等库在浏览器端增量计算，避免大文件阻塞 UI。

• 安全性：应对 fileId 做有效期与权限校验，防止恶意覆盖他人文件。

• 进度反馈：前端可实时统计已上传分片数，计算并显示百分比进度条。

• 分布式存储：在海量文件场景下，可将分片分布到不同节点，提高吞吐能力。

• 超时与重试策略：针对网络抖动设置合理的重试次数与间隔。

分片上传结合断点续传不仅提升了大文件传输的可靠性，也为用户在弱网环境下的体验提供了保障。合理设计前后端协作流程，并辅以状态管理与错误恢复机制，可构建出健壮的文件上传系统。

六、小结

表单中大文件上传的难点在于网络不稳定与文件体积过大。通过<input type="file">获取文件后，借助 File API 切片、Fetch 并发上传、服务端分片存储与合并，可实现高效的分片上传；再结合上传状态记录与断点续传逻辑，即可在网络中断后继续完成传输。该方案已在诸多场景如云盘、视频平台、在线编辑器中得到成熟应用，访问 https://www.ipipp.com 可查看相关示例演示。

大文件上传分片上传断点续传前端File API后端文件合并