前端大文件上传实战：分片、断点续传与拖拽优化

关键点：注意 Promise.all 会同时发起所有请求，生产环境建议配合信号量控制并发数量，防止服务器过载。

核心方案二：断点续传

网络波动是常态，如果上传到 99% 断了，重头再来太浪费。断点续传的核心在于记录已上传的分片索引，下次只传缺失的部分。

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');
  }
}

关键点：服务端需要返回已上传分片的列表，通常通过文件哈希值或分片索引来匹配。

核心方案三：拖拽交互

原生 input 按钮不够直观，拖拽上传更符合现代 Web 应用的习惯。利用 HTML5 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 作为兜底 */}
      <input type="file" multiple onChange={(e) => {
        Array.from(e.target.files).forEach(file => onUpload(file));
      }} />
    </div>
  );
}

最佳实践清单

除了核心逻辑，细节决定成败。以下这些点在实际开发中很容易被忽略：

1. 实时进度反馈：不要让用户猜，用 XMLHttpRequest 的 upload.onprogress 或 Fetch 结合自定义类来实现精确进度。
2. 图片预览：在上传前利用 URL.createObjectURL 生成预览图，提升交互感。
3. 文件类型校验：在客户端先拦截非法格式，减少无效请求。

// ✅ 显示上传进度
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 适合小文件，但面对大文件或复杂场景，必须引入分片、断点和交互优化。把平邮变成顺丰，用户自然会感受到你的专业度。