<template>
  <!-- 批量上傳組件 -->
  <el-upload
    ref="uploadRef"
    multiple
    accept="*"
    :auto-upload="false"
    :on-change="handleFileChange"
    :file-list="fileList"
    class="upload-demo"
  >
    <el-button type="primary">選擇批量文件</el-button>
  </el-upload>
  <el-button type="success" @click="startBatchUpload" style="margin-top: 10px;">
    開始上傳
  </el-button>
  <!-- 上傳進(jìn)度顯示 -->
  <div v-for="file in uploadStatus" :key="file.uid" style="margin-top: 10px;">
    <span>{{ file.name }}</span>
    <el-progress :percentage="file.progress" :status="file.status" style="width: 300px; margin-left: 10px;" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElUpload, ElButton, ElProgress, ElMessage } from 'element-plus';
import axios from 'axios';
// 已選擇的文件列表
const fileList = ref([]);
// 上傳狀態(tài)（存儲(chǔ)每個(gè)文件的進(jìn)度、狀態(tài)）
const uploadStatus = ref([]);
// 上傳隊(duì)列（待上傳的文件）
let uploadQueue = [];
// 當(dāng)前正在上傳的文件數(shù)
let currentUploads = 0;
// 最大并發(fā)數(shù)（根據(jù)服務(wù)器性能調(diào)整，建議3-5）
const maxConcurrent = 3;
// 上傳接口地址（替換為你的實(shí)際接口）
const uploadApi = '/api/upload/file';
// 選擇文件時(shí)，加入隊(duì)列和狀態(tài)管理
const handleFileChange = (uploadFile) => {
  // 去重（避免重復(fù)選擇同一文件）
  const isRepeat = uploadQueue.some(item => item.uid === uploadFile.uid);
  if (isRepeat) return;
  // 加入上傳隊(duì)列
  uploadQueue.push(uploadFile);
  // 初始化上傳狀態(tài)
  uploadStatus.value.push({
    uid: uploadFile.uid,
    name: uploadFile.name,
    progress: 0,
    status: 'ready' // ready: 待上傳, uploading: 上傳中, success: 成功, error: 失敗
  });
};
// 單個(gè)文件上傳函數(shù)
const uploadSingleFile = async (file) => {
  // 更新當(dāng)前文件狀態(tài)為上傳中
  const statusItem = uploadStatus.value.find(item => item.uid === file.uid);
  statusItem.status = 'uploading';
  const formData = new FormData();
  formData.append('file', file.raw); // 原生文件對(duì)象
  try {
    const response = await axios.post(uploadApi, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      // 監(jiān)聽上傳進(jìn)度，更新進(jìn)度條
      onUploadProgress: (progressEvent) => {
        const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        statusItem.progress = progress;
      }
    });
    // 上傳成功
    statusItem.status = 'success';
    statusItem.progress = 100;
    ElMessage.success(`${file.name} 上傳成功`);
    return response.data;
  } catch (error) {
    // 上傳失敗
    statusItem.status = 'error';
    ElMessage.error(`${file.name} 上傳失敗，請(qǐng)重試`);
    throw error; // 拋出錯(cuò)誤，便于后續(xù)重試
  }
};
// 隊(duì)列調(diào)度函數(shù)：控制并發(fā)數(shù)，循環(huán)執(zhí)行上傳
const processQueue = async () => {
  // 循環(huán)條件：當(dāng)前上傳數(shù) < 最大并發(fā)數(shù)，且隊(duì)列不為空
  while (currentUploads < maxConcurrent && uploadQueue.length > 0) {
    // 從隊(duì)列頭部取出一個(gè)文件
    const file = uploadQueue.shift();
    currentUploads++; // 正在上傳數(shù)+1
    try {
      await uploadSingleFile(file);
    } catch (error) {
      // 失敗后可選擇重新加入隊(duì)列（可選，根據(jù)需求調(diào)整）
      // uploadQueue.unshift(file); // 失敗后放回隊(duì)列頭部，重新上傳
    } finally {
      currentUploads--; // 上傳完成（成功/失敗），正在上傳數(shù)-1
      processQueue(); // 遞歸調(diào)用，繼續(xù)處理下一個(gè)文件
    }
  }
};
// 開始批量上傳
const startBatchUpload = () => {
  if (uploadQueue.length === 0) {
    ElMessage.warning('請(qǐng)先選擇文件');
    return;
  }
  // 啟動(dòng)隊(duì)列調(diào)度
  processQueue();
};
</script>

// 1. 新增重試配置（可自定義）
const retryConfig = {
  maxRetry: 3, // 最大重試次數(shù)
  retryDelay: 1000 // 基礎(chǔ)重試間隔（ms），指數(shù)退避：1s、2s、4s...
};
// 2. 優(yōu)化單個(gè)文件上傳函數(shù)，增加重試邏輯
const uploadSingleFile = async (file, retryCount = 0) => {
  const statusItem = uploadStatus.value.find(item => item.uid === file.uid);
  statusItem.status = 'uploading';
  const formData = new FormData();
  formData.append('file', file.raw);
  try {
    const response = await axios.post(uploadApi, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (progressEvent) => {
        const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        statusItem.progress = progress;
      }
    });
    statusItem.status = 'success';
    statusItem.progress = 100;
    ElMessage.success(`${file.name} 上傳成功`);
    return response.data;
  } catch (error) {
    // 重試邏輯：未達(dá)到最大重試次數(shù)，繼續(xù)重試
    if (retryCount < retryConfig.maxRetry) {
      const delay = retryConfig.retryDelay * Math.pow(2, retryCount); // 指數(shù)退避
      statusItem.status = `retry(${retryCount + 1}/${retryConfig.maxRetry})`;
      ElMessage.warning(`${file.name} 上傳失敗，${delay}ms后重試（${retryCount + 1}/${retryConfig.maxRetry}）`);
      // 延遲重試
      await new Promise(resolve => setTimeout(resolve, delay));
      return uploadSingleFile(file, retryCount + 1);
    }
    // 達(dá)到最大重試次數(shù)，標(biāo)記失敗
    statusItem.status = 'error';
    ElMessage.error(`${file.name} 上傳失敗，已達(dá)到最大重試次數(shù)`);
    throw error;
  }
};
// 3. 可選：全局取消上傳（新增）
const cancelAllUpload = () => {
  uploadQueue = []; // 清空待上傳隊(duì)列
  currentUploads = 0; // 重置正在上傳計(jì)數(shù)
  // 更新所有文件狀態(tài)為取消
  uploadStatus.value.forEach(item => {
    if (item.status === 'uploading' || item.status.includes('retry')) {
      item.status = 'cancelled';
    }
  });
  ElMessage.info('已取消所有上傳任務(wù)');
};

// 1. 分片配置
const chunkConfig = {
  chunkSize: 1 * 1024 * 1024, // 分片大小（1MB）
  maxConcurrent: 3, // 全局分片最大并發(fā)數(shù)（所有文件的分片總并發(fā)）
};
// 2. 并發(fā)限流器（全局控制所有分片的并發(fā)）
class ConcurrencyLimiter {
  constructor(maxConcurrent) {
    this.maxConcurrent = maxConcurrent;
    this.activeCount = 0; // 當(dāng)前正在上傳的分片數(shù)
    this.pendingQueue = []; // 待上傳分片隊(duì)列
  }
  // 加入隊(duì)列并執(zhí)行
  enqueue(runTask, fileId) {
    return new Promise((resolve, reject) => {
      this.pendingQueue.push({ runTask, resolve, reject, fileId });
      this.tryStartNext();
    });
  }
  // 嘗試執(zhí)行下一個(gè)分片上傳
  tryStartNext() {
    while (this.activeCount < this.maxConcurrent && this.pendingQueue.length > 0) {
      const { runTask, resolve, reject, fileId } = this.pendingQueue.shift();
      this.activeCount++;
      Promise.resolve()
        .then(() => runTask())
        .then(res => {
          this.activeCount--;
          resolve(res);
          this.tryStartNext();
        })
        .catch(err => {
          this.activeCount--;
          reject(err);
          this.tryStartNext();
        });
    }
  }
}
// 初始化并發(fā)限流器
const limiter = new ConcurrencyLimiter(chunkConfig.maxConcurrent);
// 3. 生成文件唯一標(biāo)識(shí)（用于分片合并、斷點(diǎn)續(xù)傳）
const getFileIdentifier = (file) => {
  // 基于文件名、大小、最后修改時(shí)間生成唯一標(biāo)識(shí)，避免重復(fù)上傳
  const originalFile = file._originalFile || file;
  return `${originalFile.name}_${originalFile.size}_${originalFile.lastModified}`;
};
// 4. 分片切割函數(shù)
const splitFileIntoChunks = (file) => {
  const chunks = [];
  const fileSize = file.size;
  let start = 0;
  while (start < fileSize) {
    const end = Math.min(start + chunkConfig.chunkSize, fileSize);
    chunks.push(file.slice(start, end)); // 切割分片
    start = end;
  }
  return chunks;
};
// 5. 單個(gè)分片上傳函數(shù)
const uploadChunk = async (chunk, fileId, chunkIndex, totalChunks) => {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('fileId', fileId);
  formData.append('chunkIndex', chunkIndex);
  formData.append('totalChunks', totalChunks);
  const response = await axios.post('/api/upload/chunk', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
  return response.data;
};
// 6. 單個(gè)大文件上傳（分片+并發(fā)）
const uploadLargeFile = async (file) => {
  const fileId = getFileIdentifier(file);
  const chunks = splitFileIntoChunks(file.raw);
  const totalChunks = chunks.length;
  const statusItem = uploadStatus.value.find(item => item.uid === file.uid);
  statusItem.status = 'uploading';
  // 所有分片上傳任務(wù)，加入并發(fā)限流器
  const chunkTasks = chunks.map((chunk, index) => {
    return limiter.enqueue(() => uploadChunk(chunk, fileId, index, totalChunks), fileId)
      .then(() => {
        // 更新當(dāng)前文件進(jìn)度（已上傳分片數(shù)/總分片數(shù)）
        const progress = Math.round(((index + 1) / totalChunks) * 100);
        statusItem.progress = progress;
      });
  });
  // 所有分片上傳完成后，請(qǐng)求服務(wù)器合并分片
  try {
    await Promise.all(chunkTasks);
    await axios.post('/api/upload/merge', { fileId, fileName: file.name });
    statusItem.status = 'success';
    statusItem.progress = 100;
    ElMessage.success(`${file.name} 上傳成功`);
  } catch (error) {
    statusItem.status = 'error';
    ElMessage.error(`${file.name} 上傳失敗，請(qǐng)重試`);
    throw error;
  }
};
// 7. 修改隊(duì)列調(diào)度函數(shù)，適配大文件分片上傳
const processQueue = async () => {
  while (uploadQueue.length > 0) {
    const file = uploadQueue.shift();
    // 判斷文件大小，決定是否分片上傳
    if (file.size > chunkConfig.chunkSize) {
      await uploadLargeFile(file);
    } else {
      await uploadSingleFile(file);
    }
  }
};

// 1. 安裝
// npm install vue-upload-component --save
// 2. 全局注冊(cè)（main.js）
import Vue from 'vue';
import UploadComponent from 'vue-upload-component';
Vue.component('file-upload', UploadComponent);
// 3. 頁(yè)面使用（自動(dòng)控制并發(fā)）
<template>
  <file-upload
    v-model="files"
    url="/api/upload/file"
    :multiple="true"
    :concurrency="3" // 最大并發(fā)數(shù)
    :retry="3" // 最大重試次數(shù)
    @input-file="handleFile"
  >
    <el-button type="primary">批量上傳</el-button>
  </file-upload>
</template>
<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFile(file) {
      // 上傳狀態(tài)監(jiān)聽
      console.log(file.progress, file.status);
    }
  }
};
</script>