前端文件上传进阶：分片、断点续传与体验优化

这里需要注意并发控制。虽然 Promise.all 能加速，但如果同时发起过多请求，可能会触发浏览器的连接数限制或导致服务器压力过大。实际生产中建议配合信号量或队列管理并发数量。

2. 断点续传

如果上传中途失败，重新上传整个文件是浪费带宽。通过记录已上传的分片索引，可以跳过已完成的部分。

class ResumableUploader extends ChunkUploader {
  constructor(file) {
    super(file);
    this.uploadedChunks = new Set();
  }

  async init() {
    // 获取服务端已上传的分片列表
    const response = await fetch(`/api/upload/status?filename=${this.file.name}`);
    const { uploadedChunks } = await response.json();
    this.uploadedChunks = new Set(uploadedChunks);
    
    // 可选：同步到本地缓存以便下次加载
    localStorage.setItem('uploadProgress', JSON.stringify([...this.uploadedChunks]));
  }

  async upload() {
    const chunks = Math.ceil(this.file.size / this.chunkSize);
    for (let i = 0; i < chunks; i++) {
      if (this.uploadedChunks.has(i)) {
        console.log(`分片 ${i} 已上传，跳过`);
        continue;
      }
      const start = i * this.chunkSize;
      const end = Math.min(start + this.chunkSize, this.file.size);
      const chunk = this.file.slice(start, end);
      await this.uploadChunk(chunk, i);
      this.uploadedChunks.add(i);
    }
    await this.mergeChunks();
    localStorage.removeItem('uploadProgress');
  }
}

实现断点续传的关键在于后端接口要支持查询已上传分片的状态，并在合并文件时校验完整性。

3. 拖拽上传体验

除了逻辑优化，交互体验同样重要。原生 input 隐藏后，通过 Drag & Drop API 提供自定义区域，能让操作更直观。

import { useCallback } from 'react';

function DragUpload({ onUpload }) {
  const handleDrop = useCallback((e) => {
    e.preventDefault();
    const files = Array.from(e.dataTransfer.files);
    files.forEach(file => onUpload(file));
  }, [onUpload]);

  const handleDragOver = useCallback((e) => {
    e.preventDefault();
  }, []);

  return (
    <div className="drag-upload" onDrop={handleDrop} onDragOver={handleDragOver}>
      <p>拖拽文件到此处上传</p>
      <input type="file" multiple onChange={(e) => {
        Array.from(e.target.files).forEach(file => onUpload(file));
      }} />
    </div>
  );
}

注意 preventDefault() 的使用，否则浏览器会尝试打开文件而不是触发事件。

实战技巧与最佳实践

在实际项目中，除了上述核心功能，还需关注以下细节：

1. 并发控制：限制同时上传的分片数量，避免阻塞主线程或触发网络限制。
2. 进度显示：结合 XMLHttpRequest 的 upload.onprogress 或分片计数实时反馈。
3. 文件校验：上传前检查类型和大小，减少无效请求。
4. 错误重试：针对单个分片失败的情况设计指数退避重试机制。

// ✅ 显示上传进度
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  const progress = (e.loaded / e.total) * 100;
  console.log(`${progress.toFixed(2)}%`);
};

// ✅ 图片预览
const preview = URL.createObjectURL(file);

// ✅ 文件类型检查
const allowedTypes = ['image/jpeg', 'image/png'];
if (!allowedTypes.includes(file.type)) {
  alert('不支持的文件类型');
  return;
}

总结

文件上传看似简单，实则是用户体验的关键环节。原生 input 适合小文件，但对于生产环境的大文件场景，分片、断点续传以及友好的交互设计必不可少。优化后的上传流程就像从平邮升级为快递，让用户在等待中也能感受到掌控感。