src/
  api/
    index.ts           // axios 實(shí)例與 API 函數(shù)
  worker/
    hash-worker.js     // 切片與文件Hash計(jì)算
  upload/
    limiter.ts         // ConcurrencyLimiter
    types.ts           // 類型定義
    helpers.ts         // 進(jìn)度、重試、工具函數(shù)
  views/
    Uploader.vue       // 上傳頁面（UI + 調(diào)度）

/**
 * 文件上傳狀態(tài)枚舉
 * - idle: 初始狀態(tài)，未開始上傳
 * - uploading: 上傳中
 * - paused: 已暫停
 * - completed: 上傳完成
 * - failed: 上傳失敗
 */
export type FileState = 'idle' | 'uploading' | 'paused' | 'completed' | 'failed';

/**
 * 分片上傳狀態(tài)枚舉
 * - idle: 初始狀態(tài)，未開始上傳
 * - uploading: 上傳中
 * - completed: 上傳完成
 * - failed: 上傳失敗
 */
export type ChunkState = 'idle' | 'uploading' | 'completed' | 'failed';

/**
 * 分片上傳任務(wù)信息
 */
export interface UploadChunkTask {
  fileId: string;                // 所屬文件ID
  chunkId: string;               // 分片唯一標(biāo)識(shí)，格式如 `${fileId}-${chunkIndex}`
  chunkIndex: number;            // 分片序號(hào)（從0開始）
  size: number;                  // 分片大?。ㄗ止?jié)）
  blob: Blob;                    // 分片二進(jìn)制數(shù)據(jù)

  chunkHash: string;             // 分片哈希值，格式如 `${fileHash}-${chunkIndex}`，用于斷點(diǎn)續(xù)傳識(shí)別
  uploadedBytes: number;         // 已上傳字節(jié)數(shù)
  attemptCount: number;          // 當(dāng)前重試次數(shù)
  maxAttempts: number;           // 最大重試次數(shù)
  abortController: AbortController; // 用于取消分片上傳的中止控制器
  state: ChunkState;             // 當(dāng)前分片狀態(tài)
}

/**
 * 文件上傳任務(wù)信息
 */
export interface UploadFileTask {
  fileId: string;                // 文件唯一標(biāo)識(shí)
  fileName: string;              // 文件名
  fileSize: number;              // 文件總大小（字節(jié)）
  fileHash: string;              // 文件哈希值（用于整體校驗(yàn)）

  chunkSize: number;             // 每個(gè)分片的大小（字節(jié)）
  totalChunks: number;           // 總分片數(shù)
  chunkTasks: UploadChunkTask[]; // 所有分片任務(wù)數(shù)組

  state: FileState;              // 文件整體上傳狀態(tài)
  isPaused: boolean;             // 是否手動(dòng)暫停

  inflightChunks: Set<UploadChunkTask>; // 正在上傳中的分片集合
  uploadedBytes: number;         // 文件級(jí)已上傳字節(jié)數(shù)（累計(jì)所有分片）
  totalBytes: number;            // 文件級(jí)總字節(jié)數(shù)（等于fileSize）
  percent: number;               // 文件級(jí)上傳進(jìn)度百分比（0-100）
}

/**
 * 全局上傳進(jìn)度信息
 */
export interface GlobalProgress {
  uploadedBytes: number;         // 全局已上傳字節(jié)數(shù)（累計(jì)所有文件）
  totalBytes: number;            // 全局總字節(jié)數(shù)（累計(jì)所有文件）
  percent: number;               // 全局上傳進(jìn)度百分比（0-100）
}

/**
 * 并發(fā)限制器，用于控制同時(shí)執(zhí)行的任務(wù)數(shù)量。
 * 當(dāng)達(dá)到最大并發(fā)數(shù)時(shí)，新任務(wù)會(huì)進(jìn)入隊(duì)列等待。
 */
export class ConcurrencyLimiter {
  // 最大并發(fā)任務(wù)數(shù)
  private maxConcurrent: number;
  // 當(dāng)前正在執(zhí)行的任務(wù)數(shù)
  private activeCount = 0;
  // 等待隊(duì)列，存儲(chǔ)尚未執(zhí)行的任務(wù)
  private pendingQueue: Array<{
    runTask: () => Promise<unknown>; // 任務(wù)執(zhí)行函數(shù)（返回 Promise）
    resolve: (v: unknown) => void;   // 任務(wù)成功時(shí)的回調(diào)
    reject: (e: unknown) => void;    // 任務(wù)失敗時(shí)的回調(diào)
    fileId: string;                  // 任務(wù)關(guān)聯(lián)的文件ID（用于取消）
  }> = [];

  constructor(maxConcurrent: number) {
    this.maxConcurrent = maxConcurrent;
  }

  /**
   * 將任務(wù)加入隊(duì)列，并返回一個(gè) Promise。
   * 當(dāng)任務(wù)開始執(zhí)行時(shí)，Promise 會(huì)根據(jù)任務(wù)結(jié)果 resolve/reject。
   * @param runTask 待執(zhí)行的任務(wù)函數(shù)
   * @param fileId 關(guān)聯(lián)的文件ID（用于后續(xù)取消）
   */
  enqueue(runTask: () => Promise<unknown>, fileId: string) {
    return new Promise((resolve, reject) => {
      // 將任務(wù)推入等待隊(duì)列
      this.pendingQueue.push({ runTask, resolve, reject, fileId });
      // 嘗試啟動(dòng)下一個(gè)任務(wù)（如果未達(dá)到并發(fā)上限）
      this.tryStartNext();
    });
  }

  /**
   * 根據(jù)文件ID移除隊(duì)列中的待執(zhí)行任務(wù)（例如取消上傳）。
   * @param fileId 要移除的任務(wù)關(guān)聯(lián)的文件ID
   */
  removePendingByFileId(fileId: string) {
    this.pendingQueue = this.pendingQueue.filter(item => item.fileId !== fileId);
  }

  /**
   * 嘗試從隊(duì)列中啟動(dòng)下一個(gè)任務(wù)（如果未達(dá)到并發(fā)上限）。
   */
  private tryStartNext() {
    // 只要當(dāng)前活躍任務(wù)數(shù)未達(dá)上限且隊(duì)列非空，就繼續(xù)啟動(dòng)任務(wù)
    while (this.activeCount < this.maxConcurrent && this.pendingQueue.length > 0) {
      const next = this.pendingQueue.shift()!; // 從隊(duì)列頭部取出任務(wù)
      this.activeCount++; // 增加活躍任務(wù)計(jì)數(shù)

      // 立即執(zhí)行任務(wù)（包裝在 Promise.resolve 中以捕獲同步錯(cuò)誤）
      Promise.resolve()
        .then(() => next.runTask()) // 執(zhí)行任務(wù)函數(shù)
        .then(res => {
          this.activeCount--;       // 任務(wù)完成，減少活躍計(jì)數(shù)
          next.resolve(res);        // 通知外部任務(wù)成功
          this.tryStartNext();      // 遞歸檢查是否能啟動(dòng)新任務(wù)
        })
        .catch(err => {
          this.activeCount--;       // 任務(wù)失敗，減少活躍計(jì)數(shù)
          next.reject(err);         // 通知外部任務(wù)失敗
          this.tryStartNext();      // 遞歸檢查是否能啟動(dòng)新任務(wù)
        });
    }
  }
}

import axios from 'axios';

// 秒傳/斷點(diǎn)續(xù)傳 預(yù)檢查
export async function checkFile(params: {
  fileHash: string;
  fileName: string;
}) {
}

// 上傳切片
export async function uploadChunk(data: FormData, signal: AbortSignal) {
}

// 合并切片
export async function mergeChunk(params: {
  fileHash: string;
  fileName: string;
  chunkSize: number;
}) {
}

// worker/hash-worker.js
self.importScripts('https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js');

/**
 * 將文件切割為多個(gè)分片
 * @param {File} file - 待分片的文件對(duì)象
 * @param {number} chunkSize - 每個(gè)分片的大小（字節(jié)）
 * @returns {Array<{blob: Blob, size: number}>} 分片數(shù)組，包含每個(gè)分片的Blob對(duì)象和大小
 */
function createFileChunks(file, chunkSize) {
  const chunks = [];
  let offset = 0; // 當(dāng)前分片的起始字節(jié)位置
  
  // 循環(huán)切割直到覆蓋整個(gè)文件
  while (offset < file.size) {
    // 使用slice方法切割文件（兼容大文件）
    const blob = file.slice(offset, offset + chunkSize);
    chunks.push({ 
      blob,          // 分片二進(jìn)制數(shù)據(jù)
      size: blob.size // 記錄分片實(shí)際大小（最后一片可能小于chunkSize）
    });
    offset += chunkSize; // 移動(dòng)切割位置
  }
  return chunks;
}

/**
 * 計(jì)算文件哈希（基于所有分片的增量計(jì)算）
 * @param {Array<{blob: Blob}>} chunks - 分片數(shù)組
 * @returns {Promise<string>} 文件的MD5哈希值
 */
async function calcFileHash(chunks) {
  // 使用SparkMD5庫(kù)進(jìn)行增量哈希計(jì)算
  const spark = new self.SparkMD5.ArrayBuffer();
  let processedCount = 0; // 已處理分片計(jì)數(shù)

  for (let i = 0; i < chunks.length; i++) {
    const { blob } = chunks[i];
    // 將Blob轉(zhuǎn)換為ArrayBuffer進(jìn)行哈希計(jì)算
    const buf = await blob.arrayBuffer();
    spark.append(buf); // 增量更新哈希
    processedCount++;

    // 計(jì)算并上報(bào)當(dāng)前進(jìn)度
    const percentage = Math.round((processedCount / chunks.length) * 100);
    self.postMessage({ 
      type: 'progress', 
      percentage       // 進(jìn)度百分比（0-100）
    });
  }
  return spark.end(); // 返回最終哈希值
}

// WebWorker消息處理器
self.onmessage = async (e) => {
  const { file, chunkSize } = e.data; // 從主線程接收的參數(shù)
  
  try {
    // 1. 文件分片
    const fileChunkList = createFileChunks(file, chunkSize);
    
    // 2. 計(jì)算文件哈希（包含進(jìn)度上報(bào)）
    const fileHash = await calcFileHash(fileChunkList);
    
    // 處理成功，返回結(jié)果給主線程
    self.postMessage({ 
      type: 'done',
      fileHash,        // 文件完整哈希值
      fileChunkList    // 分片結(jié)果數(shù)組
    });
    self.close();      // 關(guān)閉Worker
  } catch (err) {
    // 錯(cuò)誤處理
    self.postMessage({ 
      type: 'error', 
      error: String(err) // 錯(cuò)誤信息轉(zhuǎn)字符串
    });
    self.close();
  }
};

<template>
  <!-- 上傳器主界面 -->
  <div class="uploader">
    <!-- 文件選擇區(qū)域 -->
    <label class="btn">
      選擇文件
      <input type="file" multiple @change="onSelectFiles" hidden />
    </label>

    <!-- 上傳控制參數(shù) -->
    <div class="controls">
      <label>
        切片大小(MB):
        <input type="number" v-model.number="chunkSizeMB" min="1" max="16" />
      </label>
      <label>
        全局并發(fā):
        <input type="number" v-model.number="maxGlobalConcurrency" min="1" max="12" />
      </label>
    </div>

    <!-- 全局進(jìn)度顯示 -->
    <div class="global-progress">
      全局進(jìn)度：{{ globalProgress.percent }}%（{{ formatBytes(globalProgress.uploadedBytes) }} / {{ formatBytes(globalProgress.totalBytes) }}）
    </div>

    <!-- 文件列表展示 -->
    <ul class="file-list">
      <li v-for="f in fileTasks" :key="f.fileId">
        <div class="row">
          <div class="name">{{ f.fileName }}</div>
          <div class="state">{{ f.state }}</div>
          <div class="progress">
            {{ f.percent }}%（{{ formatBytes(f.uploadedBytes) }} / {{ formatBytes(f.totalBytes) }}）
          </div>
          <div class="actions">
            <button v-if="f.state !== 'paused' && f.state !== 'completed'" @click="pauseFileUpload(f.fileId)">暫停</button>
            <button v-if="f.state === 'paused'" @click="resumeFileUpload(f.fileId)">恢復(fù)</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { checkFile, uploadChunk as apiUploadChunk, mergeChunk } from '@/api';
import { ConcurrencyLimiter } from '@/upload/limiter';
import type { UploadFileTask, UploadChunkTask, GlobalProgress } from '@/upload/types';

// 配置參數(shù)
const DEFAULT_CHUNK_SIZE_MB = 1; // 默認(rèn)切片大小1MB
const DEFAULT_MAX_CONCURRENCY = 6; // 默認(rèn)并發(fā)數(shù)6

const chunkSizeMB = ref<number>(DEFAULT_CHUNK_SIZE_MB);
const maxGlobalConcurrency = ref<number>(DEFAULT_MAX_CONCURRENCY);

// 狀態(tài)管理
const fileTasks = reactive<UploadFileTask[]>([]);
const globalProgress = reactive<GlobalProgress>({ 
  uploadedBytes: 0, 
  totalBytes: 0, 
  percent: 0 
});

// 并發(fā)控制（建議使用工廠模式動(dòng)態(tài)重建）
const limiter = new ConcurrencyLimiter(maxGlobalConcurrency.value);

/* 核心方法 */

/**
 * 文件選擇處理
 * 1. 獲取文件列表
 * 2. 為每個(gè)文件創(chuàng)建上傳任務(wù)
 */
async function onSelectFiles(e: Event) {
  const input = e.target as HTMLInputElement;
  if (!input?.files?.length) return;

  // 并行處理多個(gè)文件（注意瀏覽器并發(fā)限制）
  await Promise.all(
    Array.from(input.files).map(file => 
      prepareAndStartFileTask(file)
    )
  );
  
  input.value = ''; // 重置input
}

/**
 * 文件上傳預(yù)處理（核心流程）
 * 1. 創(chuàng)建文件任務(wù)對(duì)象
 * 2. 切片+計(jì)算hash（Worker線程）
 * 3. 檢查秒傳/斷點(diǎn)續(xù)傳
 * 4. 啟動(dòng)上傳調(diào)度
 */
async function prepareAndStartFileTask(file: File) {
  // 生成唯一文件ID（實(shí)際項(xiàng)目建議使用更可靠的生成方式）
  const fileId = `${file.name}-${file.size}-${Date.now()}`;
  const chunkSize = Math.max(1, chunkSizeMB.value) * 1024 * 1024;

  // 初始化文件任務(wù)（響應(yīng)式對(duì)象）
  const task: UploadFileTask = reactive({
    fileId,
    fileName: file.name,
    fileSize: file.size,
    fileHash: '',
    chunkSize,
    totalChunks: 0,
    chunkTasks: [],
    state: 'idle',
    isPaused: false,
    inflightChunks: new Set(),
    uploadedBytes: 0,
    totalBytes: file.size,
    percent: 0
  });

  fileTasks.push(task); // 立即加入列表顯示

  try {
    // Step 1: 文件切片+計(jì)算hash（Worker線程）
    const { fileHash, chunkTasks } = await createChunksAndHashInWorker(file, chunkSize, fileId);
    task.fileHash = fileHash;
    task.chunkTasks = chunkTasks.map(ct => reactive(ct)); // 轉(zhuǎn)為響應(yīng)式
    task.totalChunks = chunkTasks.length;

    // Step 2: 秒傳/斷點(diǎn)檢查
    const check = await checkFile({ 
      fileHash: `${fileHash}${file.name}`, 
      fileName: file.name 
    });

    if (check?.code === 0) {
      const { shouldUpload, uploadedList = [] } = check.data || {};

      // 秒傳處理
      if (!shouldUpload) {
        completeFileTask(task);
        return;
      }

      // 斷點(diǎn)續(xù)傳：過濾已上傳切片
      if (uploadedList.length > 0) {
        task.chunkTasks = task.chunkTasks.filter(ct => 
          !uploadedList.includes(ct.chunkHash)
        );
        
        // 所有切片已上傳，嘗試合并
        if (task.chunkTasks.length === 0) {
          await tryMerge(task);
          return;
        }
      }
    }

    // Step 3: 啟動(dòng)上傳
    task.state = 'uploading';
    scheduleAllChunks(task);

  } catch (err) {
    console.error('文件預(yù)處理失敗:', file.name, err);
    task.state = 'failed';
  }
}

/**
 * Web Worker 通信封裝
 * 職責(zé)：文件切片 + 計(jì)算MD5
 */
function createChunksAndHashInWorker(file: File, chunkSize: number, fileId: string) {
  return new Promise<{ fileHash: string; chunkTasks: UploadChunkTask[] }>((resolve, reject) => {
    const worker = new Worker(new URL('@/worker/hash-worker.js', import.meta.url));
    
    worker.postMessage({ file, chunkSize });
    
    worker.onmessage = (e: MessageEvent) => {
      const { type } = e.data || {};
      
      if (type === 'progress') {
        // 可在此處更新hash計(jì)算進(jìn)度
      } 
      else if (type === 'done') {
        const { fileHash, fileChunkList } = e.data;
        
        // 構(gòu)建分片任務(wù)數(shù)組
        const chunkTasks: UploadChunkTask[] = fileChunkList.map((c: any, index: number) => ({
          fileId,
          chunkId: `${fileId}-${index}`,
          chunkIndex: index,
          size: c.size,
          blob: c.blob,
          chunkHash: `${fileHash}-${index}`,
          uploadedBytes: 0,
          attemptCount: 0,
          maxAttempts: 3,
          abortController: new AbortController(),
          state: 'idle'
        }));
        
        resolve({ fileHash, chunkTasks });
        worker.terminate();
      } 
      else if (type === 'error') {
        reject(new Error(e.data?.error || 'hash計(jì)算失敗'));
        worker.terminate();
      }
    };
  });
}

/**
 * 調(diào)度文件的所有分片上傳
 * 注意：實(shí)際項(xiàng)目建議使用全局交錯(cuò)調(diào)度（buildInterleavedChunks）
 */
function scheduleAllChunks(fileTask: UploadFileTask) {
  fileTask.chunkTasks
    .filter(ct => ct.state !== 'completed')
    .forEach(ct => enqueueChunkUpload(fileTask, ct));
  
  updateGlobalTotals();
}

/**
 * 分片上傳任務(wù)封裝
 * 1. 加入并發(fā)隊(duì)列
 * 2. 處理重試邏輯
 * 3. 完成檢查
 */
function enqueueChunkUpload(fileTask: UploadFileTask, chunkTask: UploadChunkTask) {
  // 標(biāo)記為進(jìn)行中
  fileTask.inflightChunks.add(chunkTask);
  
  limiter.enqueue(
    async () => {
      try {
        await runWithRetry(
          () => uploadOneChunk(fileTask, chunkTask),
          chunkTask
        );
      } finally {
        fileTask.inflightChunks.delete(chunkTask);
      }
    },
    fileTask.fileId
  ).then(async () => {
    // 檢查文件是否全部完成
    if (isFileUploadComplete(fileTask)) {
      await tryMerge(fileTask);
    }
  }).catch(err => {
    console.error('分片上傳失敗:', chunkTask.chunkId, err);
  });
}

/**
 * 單個(gè)分片上傳實(shí)現(xiàn)
 * 關(guān)鍵點(diǎn)：
 * - 支持取消（AbortController）
 * - 進(jìn)度上報(bào)（實(shí)際項(xiàng)目需實(shí)現(xiàn)）
 */
async function uploadOneChunk(fileTask: UploadFileTask, chunkTask: UploadChunkTask) {
  chunkTask.state = 'uploading';

  const formData = new FormData();
  formData.append('fileHash', `${fileTask.fileHash}${fileTask.fileName}`);
  formData.append('fileName', fileTask.fileName);
  formData.append('index', String(chunkTask.chunkIndex));
  formData.append('chunkFile', chunkTask.blob);
  formData.append('chunkHash', chunkTask.chunkHash);
  formData.append('chunkSize', String(fileTask.chunkSize));
  formData.append('chunkNumber', String(fileTask.totalChunks));

  // 執(zhí)行上傳（帶取消支持）
  await apiUploadChunk(formData, chunkTask.abortController.signal);
  
  // 更新狀態(tài)
  chunkTask.uploadedBytes = chunkTask.size;
  chunkTask.state = 'completed';
  
  // 更新進(jìn)度
  updateFileProgress(fileTask);
  updateGlobalProgress();
}

/* 上傳控制方法 */

// 暫停上傳
function pauseFileUpload(fileId: string) {
  const fileTask = fileTasks.find(f => f.fileId === fileId);
  if (!fileTask || fileTask.state === 'completed') return;

  fileTask.isPaused = true;
  fileTask.state = 'paused';

  // 取消隊(duì)列中的任務(wù)
  limiter.removePendingByFileId(fileId);

  // 中止進(jìn)行中的上傳
  fileTask.inflightChunks.forEach(ct => {
    ct.abortController.abort();
  });
}

// 恢復(fù)上傳
function resumeFileUpload(fileId: string) {
  const fileTask = fileTasks.find(f => f.fileId === fileId);
  if (!fileTask) return;

  fileTask.isPaused = false;
  fileTask.state = 'uploading';

  // 重置未完成切片的狀態(tài)
  fileTask.chunkTasks
    .filter(ct => ct.state !== 'completed')
    .forEach(ct => {
      ct.abortController = new AbortController();
      enqueueChunkUpload(fileTask, ct);
    });
}

/* 工具方法 */

// 帶重試的執(zhí)行（指數(shù)退避）
async function runWithRetry(
  taskFn: () => Promise<unknown>,
  chunkTask: UploadChunkTask,
  maxAttempts = 3,
  baseDelay = 500
) {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    chunkTask.attemptCount = attempt;
    
    try {
      return await taskFn();
    } catch (err: any) {
      // 主動(dòng)取消不重試
      if (chunkTask.abortController.signal.aborted) throw err;
      
      // 最后一次嘗試失敗
      if (attempt === maxAttempts) {
        chunkTask.state = 'failed';
        throw err;
      }
      
      // 延遲重試
      await sleep(baseDelay * Math.pow(2, attempt - 1));
    }
  }
}

// 文件上傳完成檢查
function isFileUploadComplete(fileTask: UploadFileTask) {
  return fileTask.chunkTasks.every(c => c.state === 'completed') && 
         fileTask.state !== 'paused';
}

// 合并文件請(qǐng)求
async function tryMerge(fileTask: UploadFileTask) {
  const res = await mergeChunk({
    fileHash: fileTask.fileHash,
    fileName: fileTask.fileName,
    chunkSize: fileTask.chunkSize
  }).catch(() => null);

  if (res?.code === 0) {
    completeFileTask(fileTask);
  } else {
    fileTask.state = 'failed';
  }
}

// 更新文件進(jìn)度
function updateFileProgress(fileTask: UploadFileTask) {
  const uploaded = fileTask.chunkTasks.reduce((s, c) => s + c.uploadedBytes, 0);
  fileTask.uploadedBytes = uploaded;
  fileTask.percent = Math.round((uploaded / fileTask.totalBytes) * 100);
}

// 更新全局統(tǒng)計(jì)
function updateGlobalTotals() {
  globalProgress.totalBytes = fileTasks.reduce((s, f) => s + f.totalBytes, 0);
}

function updateGlobalProgress() {
  globalProgress.uploadedBytes = fileTasks.reduce((s, f) => s + f.uploadedBytes, 0);
  globalProgress.percent = Math.round(
    (globalProgress.uploadedBytes / globalProgress.totalBytes) * 100
  );
}

// 標(biāo)記文件上傳完成
function completeFileTask(fileTask: UploadFileTask) {
  fileTask.state = 'completed';
  fileTask.percent = 100;
  fileTask.uploadedBytes = fileTask.totalBytes;
  updateGlobalProgress();
}

/* 輔助工具 */
function sleep(ms: number) { 
  return new Promise(res => setTimeout(res, ms)); 
}

function formatBytes(n: number) {
  if (!n) return '0 B';
  const units = ['B','KB','MB','GB','TB']; 
  const i = Math.floor(Math.log(n)/Math.log(1024));
  return `${(n/Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
}
</script>