Vue批量文件上传并发的踩坑指南

<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>
  <!-- 上传进度显示 -->
  <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([]);
// 上传状态（存储每个文件的进度、状态）
const uploadStatus = ref([]);
// 上传队列（待上传的文件）
let uploadQueue = [];
// 当前正在上传的文件数
let currentUploads = 0;
// 最大并发数（根据服务器性能调整，建议3-5）
const maxConcurrent = 3;
// 上传接口地址（替换为你的实际接口）
const uploadApi = '/api/upload/file';
// 选择文件时，加入队列和状态管理
const handleFileChange = (uploadFile) => {
  // 去重（避免重复选择同一文件）
  const isRepeat = uploadQueue.some(item => item.uid === uploadFile.uid);
  if (isRepeat) return;
  // 加入上传队列
  uploadQueue.push(uploadFile);
  // 初始化上传状态
  uploadStatus.value.push({
    uid: uploadFile.uid,
    name: uploadFile.name,
    progress: 0,
    status: 'ready' // ready: 待上传, uploading: 上传中, success: 成功, error: 失败
  });
};
// 单个文件上传函数
const uploadSingleFile = async (file) => {
  // 更新当前文件状态为上传中
  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) {
    // 上传失败
    statusItem.status = 'error';
    ElMessage.error(`${file.name} 上传失败，请重试`);
    throw error; // 抛出错误，便于后续重试
  }
};
// 队列调度函数：控制并发数，循环执行上传
const processQueue = async () => {
  // 循环条件：当前上传数 < 最大并发数，且队列不为空
  while (currentUploads < maxConcurrent && uploadQueue.length > 0) {
    // 从队列头部取出一个文件
    const file = uploadQueue.shift();
    currentUploads++; // 正在上传数+1
    try {
      await uploadSingleFile(file);
    } catch (error) {
      // 失败后可选择重新加入队列（可选，根据需求调整）
      // uploadQueue.unshift(file); // 失败后放回队列头部，重新上传
    } finally {
      currentUploads--; // 上传完成（成功/失败），正在上传数-1
      processQueue(); // 递归调用，继续处理下一个文件
    }
  }
};
// 开始批量上传
const startBatchUpload = () => {
  if (uploadQueue.length === 0) {
    ElMessage.warning('请先选择文件');
    return;
  }
  // 启动队列调度
  processQueue();
};
</script>

// 1. 新增重试配置（可自定义）
const retryConfig = {
  maxRetry: 3, // 最大重试次数
  retryDelay: 1000 // 基础重试间隔（ms），指数退避：1s、2s、4s...
};
// 2. 优化单个文件上传函数，增加重试逻辑
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) {
    // 重试逻辑：未达到最大重试次数，继续重试
    if (retryCount < retryConfig.maxRetry) {
      const delay = retryConfig.retryDelay * Math.pow(2, retryCount); // 指数退避
      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);
    }
    // 达到最大重试次数，标记失败
    statusItem.status = 'error';
    ElMessage.error(`${file.name} 上传失败，已达到最大重试次数`);
    throw error;
  }
};
// 3. 可选：全局取消上传（新增）
const cancelAllUpload = () => {
  uploadQueue = []; // 清空待上传队列
  currentUploads = 0; // 重置正在上传计数
  // 更新所有文件状态为取消
  uploadStatus.value.forEach(item => {
    if (item.status === 'uploading' || item.status.includes('retry')) {
      item.status = 'cancelled';
    }
  });
  ElMessage.info('已取消所有上传任务');
};

// 1. 分片配置
const chunkConfig = {
  chunkSize: 1 * 1024 * 1024, // 分片大小（1MB）
  maxConcurrent: 3, // 全局分片最大并发数（所有文件的分片总并发）
};
// 2. 并发限流器（全局控制所有分片的并发）
class ConcurrencyLimiter {
  constructor(maxConcurrent) {
    this.maxConcurrent = maxConcurrent;
    this.activeCount = 0; // 当前正在上传的分片数
    this.pendingQueue = []; // 待上传分片队列
  }
  // 加入队列并执行
  enqueue(runTask, fileId) {
    return new Promise((resolve, reject) => {
      this.pendingQueue.push({ runTask, resolve, reject, fileId });
      this.tryStartNext();
    });
  }
  // 尝试执行下一个分片上传
  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();
        });
    }
  }
}
// 初始化并发限流器
const limiter = new ConcurrencyLimiter(chunkConfig.maxConcurrent);
// 3. 生成文件唯一标识（用于分片合并、断点续传）
const getFileIdentifier = (file) => {
  // 基于文件名、大小、最后修改时间生成唯一标识，避免重复上传
  const originalFile = file._originalFile || file;
  return `${originalFile.name}_${originalFile.size}_${originalFile.lastModified}`;
};
// 4. 分片切割函数
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. 单个分片上传函数
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. 单个大文件上传（分片+并发）
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';
  // 所有分片上传任务，加入并发限流器
  const chunkTasks = chunks.map((chunk, index) => {
    return limiter.enqueue(() => uploadChunk(chunk, fileId, index, totalChunks), fileId)
      .then(() => {
        // 更新当前文件进度（已上传分片数/总分片数）
        const progress = Math.round(((index + 1) / totalChunks) * 100);
        statusItem.progress = progress;
      });
  });
  // 所有分片上传完成后，请求服务器合并分片
  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} 上传失败，请重试`);
    throw error;
  }
};
// 7. 修改队列调度函数，适配大文件分片上传
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. 全局注册（main.js）
import Vue from 'vue';
import UploadComponent from 'vue-upload-component';
Vue.component('file-upload', UploadComponent);
// 3. 页面使用（自动控制并发）
<template>
  <file-upload
    v-model="files"
    url="/api/upload/file"
    :multiple="true"
    :concurrency="3" // 最大并发数
    :retry="3" // 最大重试次数
    @input-file="handleFile"
  >
    <el-button type="primary">批量上传</el-button>
  </file-upload>
</template>
<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFile(file) {
      // 上传状态监听
      console.log(file.progress, file.status);
    }
  }
};
</script>