element-plus eel-upload上传多个文件时怎么检查所有1文件均已上传完毕

Element Plus 的 `eel-upload` 组件支持批量上传文件，当你需要检查所有文件是否已全部上传完毕时，可以结合使用 `file-list` 和 `on-change` 或 `on-progress` 事件监听器。

首先，你需要获取到所有上传文件的信息，通常会在 `file-list` 中看到每个文件的状态。你可以设置一个变量来记录正在上传的文件总数，以及一个数组来存储每个文件的唯一标识符和其对应的进度。

例如：

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :multiple="true"
      :file-list="fileList"
      @change="handleFileChange"
      @progress="checkUploadProgress"
    ></el-upload>

    <!-- 显示上传状态信息 -->
    <ul v-if="!allFilesUploaded">
      <li v-for="(file, index) in fileList" :key="index">
        {{ file.name }} - {{ file.percent || '等待上传' }}
        <span class="status" :class="{ uploading: file.status === 'uploading', done: file.status === 'done' }"></span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const uploadUrl = 'your-upload-url';
let allFilesUploaded = ref(false);
let uploadedFiles = [];

function handleFileChange(fileList) {
  // 更新fileList
  fileList.forEach((file) => {
    uploadedFiles.push(file);
    if (!file.status || file.status !== 'done') {
      allFilesUploaded.value = false;
    }
  });
}

function checkUploadProgress(progressEvent) {
  const file = progressEvent.file;
  if (file && file.status === 'uploading') {
    // 更新单个文件的进度
    const index = uploadedFiles.findIndex(f => f.uid === file.uid);
    if (index > -1) {
      uploadedFiles[index].percent = progressEvent.percentage;
    }
    
    // 检查是否所有文件都已上传
    allFilesUploaded.value = uploadedFiles.every(file => file.status === 'done');
  }
}
</script>

当 `allFilesUploaded` 变为 `true` 时，说明所有的文件都已经上传完成。记得在实际应用中处理上传成功、失败及中断的情况。同时，确保在 `@change` 事件触发后初始化 `uploadedFiles` 数组，以便后续跟踪每个文件的上传状态。