前端文件上传优化方案：分片与断点续传实现

问题背景

实际项目中常遇到大文件上传导致浏览器卡顿且无进度提示的问题。原生 input 类型 file 在上传大文件时，缺乏进度反馈和断点续传能力，严重影响用户体验。

原生上传局限

<!-- 反面教材：原生文件上传 -->
<input type="file" onchange="uploadFile(this.files[0])" />
<script>
function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  // 直接上传，没有进度，没有断点续传
  fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
}
</script>

核心实现方案

1. 分片上传

将大文件切割为多个小片段并行或顺序上传，降低单次请求负载并支持进度追踪。

// 正确姿势：分片上传
class ChunkUploader {
  constructor(file, options = {}) {
    this.file = file;
    this.chunkSize = options.chunkSize || 1024 * 1024; // 1MB
    this.chunks = Math.ceil(file.size / this.chunkSize);
    . = ;
  }

   () {
     promises = [];
     ( i = ; i < .; i++) {
       start = i * .;
       end = .(start + ., ..);
       chunk = ..(start, end);
      promises.(.(chunk, i));
    }
     .(promises);
     .();
  }

   () {
     formData =  ();
    formData.(, chunk);
    formData.(, index);
    formData.(, .);
    formData.(, ..);
     (, {
      : ,
      : formData
    });
    .++;
    .(. / .);
  }

  () {
    .();
  }

   () {
     (, {
      : ,
      : { :  },
      : .({ : .., : . })
    });
  }
}


 uploader =  (file, { :  *  });
uploader.();