前端文件上传进阶：告别原生 input 的局限

这里的关键在于利用 Promise.all 并发请求，同时通过回调实时计算进度。

2. 断点续传

网络不稳定时，重新上传整个文件是灾难性的。我们需要记录已上传的分片索引。

class ResumableUploader {
  constructor(file) {
    this.file = file;
    this.chunkSize = 1024 * 1024;
    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);
  }

  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);
      
      // 本地缓存进度，防止刷新丢失
      localStorage.setItem('uploadProgress', JSON.stringify([...this.uploadedChunks]));
    }
    await this.mergeChunks();
    localStorage.removeItem('uploadProgress');
  }

  async uploadChunk(chunk, index) {
    // 实际上传逻辑
  }
}

注意这里使用了 Set 来存储已上传索引，并配合 localStorage 做持久化，确保页面刷新后能恢复进度。

3. 拖拽上传

原生 input 交互性差，使用 HTML5 Drag and 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>
  );
}

实战建议

除了上述架构，还有一些细节值得注意：

1. 并发控制：不要无限制地发起请求，否则可能触发浏览器的并发限制或导致服务器压力过大。
2. 进度显示：利用 XMLHttpRequest 的 upload.onprogress 事件获取更精确的字节级进度。
3. 文件校验：在上传前检查类型和大小，避免无效请求。
4. 图片预览：使用 URL.createObjectURL 实现本地即时预览。

// 示例：图片预览与校验
const preview = URL.createObjectURL(file);
const allowedTypes = ['image/jpeg', 'image/png'];
if (!allowedTypes.includes(file.type)) {
  alert('不支持的文件类型');
  return;
}

结语

文件上传看似基础，实则是用户体验的试金石。原生 input 适合小文件，但对于生产环境，分片、断点续传和友好的交互界面才是标配。别让用户在等待中流失，把上传做得像快递一样可靠。