Vue批量文件上传并发踩坑指南：3步解决阻塞、限流、进度混乱

Vue批量文件上传中，并发问题是高频痛点——直接同时上传多个文件，会导致浏览器同域连接数耗尽、服务器被瞬时请求压垮、上传进度混乱、部分请求被限流或失败，尤其在文件较大、数量较多时，问题更突出。核心解决思路是 “控制并发数量、优化请求调度、增加容错机制” ，以下4种方案从简单到进阶，覆盖不同场景，可直接复制到项目中使用，适配Vue2/Vue3（组合式API、选项式API均兼容）。

先明确核心并发痛点：浏览器对同域并发请求数有默认限制（通常为6个），超过限制会导致请求排队阻塞；服务器一般会设置QPS限流，瞬时大量请求会被拒绝；无控制的并发会导致进度统计混乱，失败后难以重试。

方案一：基础版——固定并发数（队列调度，最常用）

核心逻辑：将所有待上传文件放入队列，设定最大并发数（如3-5个），通过“正在上传计数+队列调度”，确保同时上传的文件数不超过设定值，上传完成一个就从队列中取出下一个，循环执行，平衡上传效率和服务器压力。

适配场景：中小批量文件（10-50个）、文件大小适中（＜100MB），无需复杂容错，追求简单易实现。

实操代码（Vue3组合式API，Element Plus适配）

<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;">
    开始上传
  &lt;/el-button&gt;
  <!-- 上传进度显示 -->
  <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>

核心要点

• 通过currentUploads计数控制并发数，uploadQueue存储待上传文件，确保同时上传数量不超标；
• 每个文件上传完成（无论成功/失败），都要释放并发槽位（currentUploads--），并递归调用调度函数；
• 可根据服务器性能调整maxConcurrent，服务器性能弱则设3，性能强可设5，避免瞬时压垮服务器；
• Vue2选项式API可直接将代码迁移到methods中，data中定义响应式数据，逻辑完全一致。

方案二：进阶版——并发控制+失败重试（容错优化）

核心逻辑：在方案一的基础上，增加失败重试机制（避免网络波动导致的偶发失败）和指数退避策略（重试间隔逐渐延长，减少服务器压力），同时优化进度统计，确保进度不混乱，适配批量上传的稳定性需求。

适配场景：批量文件较多（50-200个）、网络环境不稳定、对上传成功率要求高的场景。

核心优化点（新增代码）

// 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('已取消所有上传任务');
};

核心要点

• 采用指数退避策略，重试间隔随次数增加翻倍（1s→2s→4s），避免频繁重试给服务器造成额外压力；
• 通过retryCount记录重试次数，达到最大次数后停止重试，标记为失败；
• 新增全局取消功能，可应对用户主动取消上传的场景，提升用户体验；
• 可结合接口响应头中的X-RateLimit-Remaining（服务器限流剩余次数），动态调整重试间隔，进一步适配服务器限流。

方案三：高级版——分片上传+全局并发控制（大文件批量上传）

核心逻辑：当批量上传大文件（单个＞100MB）时，即使控制并发数，单个文件上传也可能超时、卡顿，此时结合分片上传（将大文件切割为小分片，如1MB/片），同时控制“所有分片的总并发数”，实现大文件批量上传的高效、稳定，还可支持断点续传（可选）。

适配场景：批量大文件上传（单个＞100MB）、对上传速度和稳定性要求高的场景（如视频、压缩包批量上传）。

核心实现步骤（简化实操代码）

// 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);
    }
  }
};

核心要点

• 通过ConcurrencyLimiter类实现全局分片并发控制，确保所有文件的分片总并发不超标，避免服务器压力过大；
• 分片大小建议设为1-5MB，太小会增加请求次数，太大易导致超时，可根据服务器带宽调整；
• 生成文件唯一标识（getFileIdentifier），用于服务器合并分片，还可基于该标识实现断点续传（记录已上传分片，中断后无需重新上传）；
• 需配合后端接口（分片上传、分片合并），前端负责切割分片、并发上传，后端负责接收分片、合并文件。

方案四：极简版——使用成熟插件（快速落地，无需手写）

核心逻辑：如果不想手写并发控制、分片上传逻辑，可直接使用Vue生态成熟的上传插件，插件已内置并发控制、失败重试、分片上传等功能，只需简单配置即可落地，节省开发时间。

推荐插件（Vue2/Vue3通用）：

1. vue-upload-component（轻量、灵活）

// 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>

2. element-plus Upload（Vue3，自带并发控制）

Element Plus的Upload组件已内置并发控制，通过limit（最大文件数）和http-request（自定义请求）结合，可快速实现批量上传并发控制，无需额外手写队列。

四种方案对比与选型建议

方案	核心优势	适配场景	开发成本
方案一（固定并发+队列）	简单易实现、无依赖、兼容性好	中小批量、中等大小文件	低
方案二（并发+失败重试）	稳定性高、容错性强	批量较多、网络不稳定	中
方案三（分片+全局并发）	支持大文件、上传高效稳定	批量大文件、高要求场景	高
方案四（插件实现）	快速落地、无需手写复杂逻辑	快速开发、无需定制化需求	极低

核心优化补充（必看）

• 前端优化：上传前对文件进行校验（大小、格式），过滤不符合要求的文件，减少无效请求；利用Web Worker进行文件压缩、分片切割，避免阻塞主线程，确保页面流畅不卡顿；
• 后端配合：服务器需开启文件上传大小限制（如Nginx、Tomcat），配置合适的QPS限流，提供分片合并接口，同时支持文件去重（基于文件唯一标识），避免重复上传；
• 进度优化：批量上传时，可增加“全局进度”（所有文件的平均进度），提升用户体验；单个文件进度基于上传字节数或分片数计算，确保进度准确；
• 跨域处理：若前后端跨域，需在后端配置CORS，允许multipart/form-data类型请求，避免跨域拦截导致上传失败。

总结

Vue批量文件上传的并发问题，核心是“控制并发数量、优化请求调度”：简单场景用方案一（队列调度）快速落地，稳定需求用方案二（增加重试），大文件场景用方案三（分片+全局并发），快速开发用方案四（插件）。实际开发中，可根据文件大小、数量、服务器性能，选择合适的方案，也可结合多种方案（如“并发控制+分片上传+失败重试”），实现高效、稳定的批量文件上传。