Element UI实战：el-upload多文件上传的3种实现方式对比（含完整代码）

Element UI实战：el-upload多文件上传的3种实现方式对比（含完整代码）

在构建现代Web应用，尤其是后台管理系统时，文件上传功能几乎是标配。而批量上传，更是提升操作效率、优化用户体验的关键一环。Element UI作为Vue.js生态中广受欢迎的桌面端组件库，其el-upload组件为文件上传提供了开箱即用的解决方案。然而，许多开发者在面对“如何一次性上传多个文件，而非逐个触发请求”这一需求时，往往会感到困惑。默认的单文件单请求模式，不仅增加了服务器压力，也使得前端的状态管理变得复杂。本文将深入探讨三种实现el-upload多文件单次请求上传的策略，从最直观的file-list手动组装，到高度自定义的http-request接管，再到一种常被忽略但极具潜力的“请求拦截与合并”方案。我们将逐一拆解其实现原理、代码细节，并对比它们在性能、代码复杂度以及适用场景上的优劣，旨在为你提供一份清晰、可落地的技术选型指南。

1. 核心概念与前置准备

在深入代码之前，理解el-upload组件的基本工作流至关重要。默认情况下，当你选择或拖入文件时，组件会为每个文件立即（或在auto-upload为true时）发起一个独立的HTTP POST请求到指定的action地址。这对于简单的单文件上传是方便的，但在批量场景下，会产生“请求风暴”。

为了实现多文件单次上传，我们的核心目标转变为：拦截或延迟组件的默认上传行为，将用户选择的所有文件收集起来，统一封装到一个HTTP请求体中发送。这通常需要借助以下两个关键属性：

• auto-upload="false"：这是所有方案的基础。它告诉组件，在选择文件后不要自动上传，将控制权交还给开发者。
• multiple：允许用户一次性选择多个文件。

此外，我们还需要一个用于触发最终上传动作的按钮，以及一个用于临时存储已选文件列表的响应式数据（通常是fileList）。

一个基础的准备模板如下：

<template>
  <div>
    <el-upload
      ref="uploadRef"
      :action="uploadApiUrl"
      :auto-upload="false"
      :multiple="true"
      :on-change="handleFileChange"
      :file-list="fileList"
    >
      <el-button size="small">选择文件</el-button>
    </el-upload>
    <el-button type="primary" @click="handleSubmitUpload">开始上传</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadApiUrl: 'https://your-api-endpoint/upload',
      fileList: [] // 用于存储用户选择的文件对象
    };
  },
  methods: {
    handleFileChange(file, fileList) {
      // 文件列表变化时的回调
      this.fileList = fileList;
    },
    handleSubmitUpload() {
      // 在这里实现三种方案之一的上传逻辑
    }
  }
};
</script>

接下来，我们将基于这个模板，展开三种方案的详细实现。

2. 方案一：手动组装FormData（最直接方案）

这是最直观、也是社区中最常见的方案。其核心思想是：利用el-upload组件管理文件列表的展示与交互，但完全由开发者手动收集文件数据，并构造一个包含所有文件的FormData对象进行发送。

2.1 实现原理与代码

我们依赖组件的file-list属性来同步用户选择的文件。每个文件对象中，raw属性包含了原始的File对象，这是我们构建FormData所需的。

模板部分调整： 我们主要确保file-list绑定正确，并提供一个手动触发的提交按钮。

<template>
  <div>
    <el-upload
      ref="uploadRef1"
      :action="uploadApiUrl"
      :auto-upload="false"
      :multiple="true"
      :on-change="handleFileChange"
      :on-remove="handleFileRemove"
      :file-list="fileList"
      list-type="text"
    >
      <el-button size="small" icon="el-icon-upload">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">支持一次性选择多个文件，点击下方按钮统一上传</div>
    </el-upload>
    <el-button 
      type="primary" 
      @click="submitByFormData" 
      :disabled="fileList.length === 0"
      style="margin-top: 15px;"
    >
      批量上传 ({
  
  { fileList.length }}个文件)
    </el-button>
  </div>
</template>

脚本逻辑实现： 在submitByFormData方法中，我们遍历fileList，将每个文件的raw属性追加到同一个FormData实例中。

<script>
import { uploadFiles } from '@/api/file'; // 假设的API接口

export default {
  data() {
    return {
      uploadApiUrl: '',
      fileList: []
    };
  },
  methods: {
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    handleFileRemove(file, fileList) {
      this.fileList = fileList;
    },
    async submitByFormData() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择文件');
        return;
      }

      const formData = new FormData();
      
      // 关键步骤：遍历fileList，添加所有文件
      this.fileList.forEach((fileObj, index) => {
        // fileObj.raw 是原生的 File 对象
        formData.append('files', fileObj.raw); // 后端通常以数组接收，字段名如 'files'
        // 如果后端需要区分，也可以使用带索引的字段名
        // formData.append(`file_${index}`, fileObj.raw);
      });

      // 可以添加其他表单字段
      formData.append('uploader', 'admin');
      formData.append('projectId', this.currentProjectId);

      // 显示上传状