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

/**
 * 文件上傳狀態(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';

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

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

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

  chunkSize: number;             // 每個分片的大?。ㄗ止?jié)）
  totalChunks: number;           // 總分片數
  chunkTasks: UploadChunkTask[]; // 所有分片任務數組

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

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

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

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

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

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

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

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

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

import axios from 'axios';

// 秒傳/斷點續(xù)傳 預檢查
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');

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

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

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

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

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

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

    <!-- 上傳控制參數 -->
    <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>

    <!-- 全局進度顯示 -->
    <div class="global-progress">
      全局進度：{{ 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)">恢復</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';

// 配置參數
const DEFAULT_CHUNK_SIZE_MB = 1; // 默認切片大小1MB
const DEFAULT_MAX_CONCURRENCY = 6; // 默認并發(fā)數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ā)控制（建議使用工廠模式動態(tài)重建）
const limiter = new ConcurrencyLimiter(maxGlobalConcurrency.value);

/* 核心方法 */

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

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

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

  // 初始化文件任務（響應式對象）
  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: 文件切片+計算hash（Worker線程）
    const { fileHash, chunkTasks } = await createChunksAndHashInWorker(file, chunkSize, fileId);
    task.fileHash = fileHash;
    task.chunkTasks = chunkTasks.map(ct => reactive(ct)); // 轉為響應式
    task.totalChunks = chunkTasks.length;

    // Step 2: 秒傳/斷點檢查
    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;
      }

      // 斷點續(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: 啟動上傳
    task.state = 'uploading';
    scheduleAllChunks(task);

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

/**
 * Web Worker 通信封裝
 * 職責：文件切片 + 計算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計算進度
      } 
      else if (type === 'done') {
        const { fileHash, fileChunkList } = e.data;
        
        // 構建分片任務數組
        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計算失敗'));
        worker.terminate();
      }
    };
  });
}

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

/**
 * 分片上傳任務封裝
 * 1. 加入并發(fā)隊列
 * 2. 處理重試邏輯
 * 3. 完成檢查
 */
function enqueueChunkUpload(fileTask: UploadFileTask, chunkTask: UploadChunkTask) {
  // 標記為進行中
  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);
  });
}

/**
 * 單個分片上傳實現
 * 關鍵點：
 * - 支持取消（AbortController）
 * - 進度上報（實際項目需實現）
 */
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';
  
  // 更新進度
  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';

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

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

// 恢復上傳
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í)行（指數退避）
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) {
      // 主動取消不重試
      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';
}

// 合并文件請求
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';
  }
}

// 更新文件進度
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)計
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
  );
}

// 標記文件上傳完成
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>