大文件上传实战：从痛点攻坚到完美方案落地

// 原有方案：一次性上传
const formData = new FormData();
formData.append('file', file);
await axios.post('/upload', formData);

// 实现简单，但问题突出
const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  return await axios.post('/upload', formData);
};

// 大文件切分小块，逐个上传后合并
const uploadInChunks = async (file) => {
  const chunkSize = 10 * 1024 * 1024; // 10MB分片
  const chunks = Math.ceil(file.size / chunkSize);
  
  for (let i = 0; i < chunks; i++) {
    const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
    await uploadChunk(chunk, i);
  }
  
  await mergeChunks();
};

// 依赖云服务商 SDK
import OSS from 'ali-oss';

const client = new OSS({...});
await client.multipartUpload('file.zip', file);

// 核心配置参数（经多轮测试优化）
const CHUNK_SIZE = 10 * 1024 * 1024;           // 分片大小：10MB
const FILE_SIZE_THRESHOLD = 50 * 1024 * 1024;  // 分片阈值：50MB
const CONCURRENT_LIMIT = 3;                     // 并发上传数：3
const POLL_INTERVAL = 10 * 1000;               // 合并进度轮询间隔：10秒
const MAX_RETRIES = 60;                        // 最大重试次数：60次

// 进度映射：0-100% 分阶段精准展示
const calculateProgress = (stage, innerProgress) => {
  switch(stage) {
    case 'md5':
      return Math.round((innerProgress / 100) * 10); // MD5计算：0-10%
    case 'upload':
      return Math.round(10 + (innerProgress / 100) * 80); // 分片上传：10-90%
    case 'merge':
      return Math.round(90 + (innerProgress / 100) * 10); // 分片合并：90-100%
  }
};

export const uploadFileAdaptive = async (file, fileObj, onProgress) => {
  // 小文件直接上传（兼顾速度）
  if (file.size <= FILE_SIZE_THRESHOLD) {
    console.log('使用直接上传方式，文件大小:', file.size);
    return await uploadFileDirectly(file, fileObj, onProgress);
  } 
  // 大文件分片上传（保障稳定）
  else {
    console.log('使用分片上传方式，文件大小:', file.size);
    return await uploadFileInChunks(file, fileObj, onProgress);
  }
};

// 主线程代码
export const calculateMD5 = (file, onProgress) => {
  return new Promise((resolve, reject) => {
    // 创建后台 Worker 线程
    const worker = new Worker('/md5-worker.js');
    
    worker.postMessage({ file, chunkSize: CHUNK_SIZE });
    
    worker.onmessage = (e) => {
      const { type, progress, md5 } = e.data;
      
      if (type === 'progress') {
        onProgress?.(progress); // 实时同步计算进度
      } else if (type === 'complete') {
        worker.terminate(); // 计算完成销毁 Worker
        resolve(md5);
      }
    };
    
    // 5分钟超时保护
    setTimeout(() => {
      worker.terminate();
      reject(new Error('MD5计算超时'));
    }, 5 * 60 * 1000);
  });
};

const concurrentUploadChunks = async (
  file, uploadId, chunkTasks, totalChunks, 
  fileObj, abortControllers, onProgress
) => {
  const results = [];
  const executing = new Set();
  let uploadedCount = 0;

  for (const task of chunkTasks) {
    // 若并发数达上限，等待任一任务完成释放槽位
    if (executing.size >= CONCURRENT_LIMIT) {
      await Promise.race(executing);
    }

    // 创建单个分片上传任务
    const promise = uploadSingleChunkTask(
      file, uploadId, task, totalChunks,
      fileObj, abortControllers,
      () => {
        uploadedCount++;
        // 计算整体进度并同步
        const progress = Math.round(10 + (uploadedCount / chunkTasks.length) * 80);
        fileObj.progress = progress;
        onProgress?.(progress);
      }
    ).finally(() => {
      executing.delete(promise); // 任务完成释放并发槽
    });

    executing.add(promise);
    results.push(promise);
  }

  await Promise.allSettled(results); // 等待所有任务完成（成功/失败均处理）
};

// 1. 计算文件 MD5 作为唯一标识
const fileMd5 = await calculateMD5(file);

// 2. 初始化上传时携带 MD5，后端关联历史任务
const initResponse = await initUpload({
  fileName: file.name,
  fileSaveName,
  totalSize: file.size,
  fileMd5, // 关键：用于匹配已上传分片
});
const { uploadId } = initResponse;

// 3. 查询已上传的分片索引
const progressResponse = await getProgress(uploadId);
const uploadedChunkIndexes = progressResponse.uploadedChunkIndexes || [];

// 4. 仅添加未上传的分片到任务队列
for (let i = 1; i <= totalChunks; i++) {
  if (!uploadedChunkIndexes.includes(i)) {
    chunkTasks.push({ index: i, start, end });
  } else {
    console.log(`分片 ${i} 已存在，跳过`);
  }
}

// 1. 启动异步合并任务（立即返回，不阻塞）
await mergeChunks(uploadId);

// 2. 轮询查询合并进度，直到完成/失败/超时
const queryMergeProgressUntilComplete = async (uploadId, fileObj, onProgress) => {
  for (let i = 0; i < MAX_RETRIES; i++) {
    const data = await getMergeProgress(uploadId);
    const { status, progress, filePath, errorMessage } = data;
    
    // 计算合并阶段整体进度（90-100%）
    const overallProgress = Math.round(90 + (progress / 100) * 10);
    fileObj.progress = overallProgress;
    onProgress?.(overallProgress);
    
    // 合并成功：返回文件信息
    if (status === 'success') {
      return { filePath, fileName: data.fileName };
    }
    
    // 合并失败：抛出错误
    if (status === 'failed') {
      throw new Error(`合并失败: ${errorMessage}`);
    }
    
    // 未完成：等待轮询间隔后继续查询
    await new Promise(resolve => setTimeout(resolve, POLL_INTERVAL));
  }
  
  // 超时未完成：抛出错误
  throw new Error('合并超时：10分钟内未完成合并');
};

// 正确做法：流式合并
try (FileOutputStream fos = new FileOutputStream(targetFile)) {
    for (int i = 1; i <= totalChunks; i++) {
        File chunkFile = new File(chunkPath + "/" + i);
        Files.copy(chunkFile.toPath(), fos); // 流式复制，低内存占用
    }
}

// 正确做法：基于完成计数器计算进度
let uploadedCount = 0;
onChunkSuccess: () => {
  uploadedCount++;
  const progress = Math.round(10 + (uploadedCount / chunkTasks.length) * 80);
  onProgress?.(progress);
}