el-upload 多个文件上传后回显，然后继续上传其余的文件

### el-upload 组件实现多文件上传后回显并支持连续上传更多文件 为了使 `el-upload` 组件能够在多个文件上传完成后回显已上传的文件，并允许用户继续上传其他文件，需配置组件属性以及编写相应的事件处理器来管理文件列表的状态。 #### 配置项说明 - **multiple**: 设置为 `true` 以允许多文件选择。 - **limit**: 定义最大可上传文件数量。 - **on-exceed**: 处理超出文件数限制的情况。 - **file-list**: 显示已经上传成功的文件列表。 - **before-upload**: 文件上传之前进行一些操作，比如验证文件大小或类型。 - **http-request**: 自定义上传行为，用于控制实际的上传逻辑[^1]。 #### 示例代码 下面是一个完整的 Vue 单文件组件 (SFC)，展示了如何使用上述特性： ```vue <template> <div class="upload-demo"> <el-upload :action="uploadUrl" multiple :limit="3" :file-list="fileList" :on-exceed="handleExceed" :before-upload="beforeUpload" :http-request="customUpload" > <button type="button">点击上传</button> </el-upload> <!-- 已上传文件展示区域 --> <ul v-if="uploadedFiles.length"> <li v-for="(item, idx) in uploadedFiles" :key="idx">{{ item.name }}</li> </ul> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; // 假设这是服务器接收地址 const uploadUrl = '/api/upload'; let fileList = ref([] as any[]); let uploadedFiles = ref([] as Array<{ name: string }>); function beforeUpload(file: File): boolean { const isJPGOrPNG = ['image/jpeg', 'image/png'].includes(file.type); if (!isJPGOrPNG) { alert('仅限 JPG/PNG 格式的图片!'); } return isJPGOrPNG; } async function customUpload(option: { file: File }) { try { // 这里模拟异步请求过程 await new Promise((resolve) => setTimeout(resolve, 1000)); // 成功后的处理逻辑 option.file.status = 'success'; uploadedFiles.value.push({name: option.file.name}); } catch (error) { console.error(error); option.file.status = 'fail'; } } function handleExceed(files: File[], fileList: any[]) { // 移除最早的文件以便添加新的文件 fileList.shift(); // 添加新文件到队列中 files.forEach((file) => { fileList.push({ ...file, status: 'ready', percentage: 0, }); }); // 调用自定义上传函数 customUpload({ file: files[files.length - 1]}); } </script> ``` 此示例实现了如下功能： - 用户可以选择多个文件一次上传； - 如果超过设定的最大数目，则会移除最早的一个条目让位给最新加入者； - 使用 `customUpload()` 方法替代默认的行为来进行真正的上传工作； - 将成功上传的结果保存在一个独立的数据结构 (`uploadedFiles`) 中供前端显示[^2]。