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

前端文件上传方案

背景与问题

原生 input 标签在上传大文件时存在性能瓶颈，缺乏进度提示且无法断点续传。例如上传 100MB 的文件可能导致浏览器卡死，严重影响用户体验。

反面教材

<!-- 原生文件上传示例 -->
<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.);
    . = ;
  }

   () {
     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.();