前端文件上传最佳实践：分片、断点续传及拖拽

前端文件上传最佳实践

原生上传的局限性

原生 <input type="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);
    this.uploadedChunks = 0;
  }

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