大文件分片上传与断点续传技术实现详解

1. 大文件上传的核心挑战与解决方案选型

在Web开发中处理大文件上传是个经典难题。最近在重构一个内部文档管理系统时，我需要实现用户能够通过浏览器上传单个超过2GB的设计文件，同时还要支持整个文件夹的批量传输。传统的<input type="file">方式在Chrome浏览器下最大只支持约4GB文件，且文件夹上传需要额外处理，更别提网络中断时的重传问题了。

经过多轮技术验证，最终采用了基于分片上传（Chunked Upload）结合前端文件夹遍历的方案。这个方案的核心优势在于：

• 分片机制将大文件切割成多个小块，每个分片2MB大小，通过并行上传提升速度
• 每个分片都有独立校验，网络中断后只需重传失败的分片
• 前端递归读取文件夹结构，保持原始目录层级
• 服务端采用临时文件合并策略，避免内存溢出

2. 前端实现关键技术解析

2.1 文件夹选取与文件遍历

现代浏览器提供了webkitdirectory属性，配合<input type="file">可以实现文件夹选择：

html复制<input type="file" id="folderUpload" webkitdirectory directory multiple>

获取文件列表后需要递归处理子文件夹。这里我封装了一个文件树构建方法：

csharp复制// 前端TypeScript代码
interface FileTreeNode {
  path: string;
  files: File[];
  children: FileTreeNode[];
}

async function buildFileTree(fileList: FileList): Promise<FileTreeNode> {
  const root: FileTreeNode = { path: '', files: [], children: [] };
  
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];
    const pathParts = file.webkitRelativePath.split('/');
    let currentLevel = root;
    
    for (let j = 0; j < pathParts.length - 1; j++) {
      const part = pathParts[j];
      let child = currentLevel.children.find(n => n.path === part);
      
      if (!child) {
        child = { path: part, files: [], children: [] };
        currentLevel.children.push(child);
      }
      currentLevel = child;
    }
    
    currentLevel.