el-upload多文件上传，采用递归一次上传文件，上传一个文件上传完在上传第二个文件 编写整体事例代码

下面是一个基于 `el-upload` 的 Vue 示例代码，用于实现多文件递归上传的功能。该示例会依次上传每个文件，在前一个文件上传完成后再开始下一个文件的上传。 ### 实现思路 1. 获取所有需要上传的文件列表。 2. 定义一个函数处理单个文件的上传。 3. 当某个文件上传完成后，调用自身继续上传队列中的下一份文件。 4. 监听上传进度、错误事件并给出相应提示。 以下是完整的代码示例： ```vue <template> <div> <el-upload ref="upload" action="" :auto-upload="false" :on-change="handleChange" :file-list="fileList" multiple > <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="submitUpload">开始上传</el-button> </el-upload> <p v-if="progressVisible">{{ uploadProgress }}%</p> </div> </template> <script> export default { data() { return { fileList: [], // 存储待上传的所有文件 currentFileIndex: 0, // 当前正在上传的文件索引 progressVisible: false, uploadProgress: 0, }; }, methods: { handleChange(file, fileList) { this.fileList = fileList; // 更新文件列表 }, async submitUpload() { if (this.fileList.length === 0) { alert("请选择文件！"); return; } this.currentFileIndex = 0; await this.uploadNext(); }, async uploadNext() { const fileItem = this.fileList[this.currentFileIndex]; if (!fileItem || !fileItem.raw) { console.log('所有文件已上传完毕'); return; } let formData = new FormData(); formData.append("file", fileItem.raw); try { this.progressVisible = true; const response = await fetch("/your-api-endpoint-for-file-upload", { // 替换为您的API地址 method: "POST", body: formData, onUploadProgress: (e) => { if (e.total > 0) { e.percent = Math.round((e.loaded * 100) / e.total); this.uploadProgress = e.percent; } } }); if (response.ok && response.status == 200) { console.log(`文件 ${fileItem.name} 成功上传`); this.currentFileIndex++; // 移动到下一个文件索引位置 await this.uploadNext(); // 开始上传下一个文件 } else { throw new Error(response.statusText); } } catch (error) { alert(`${fileItem.name}: 文件上传失败 - 错误原因:${error.message}`); } finally { this.progressVisible = false; } }, }, }; </script> <style scoped> /* 添加样式 */ </style> ``` --- 以上代码实现了以下功能： 1. 支持通过点击按钮添加多个文件至文件列表中。 2. 提交上传时按顺序逐一上传文件。 3. 显示当前文件的上传百分比进度。 如果想要进一步扩展功能，比如暂停或取消上传流程，可以在此基础上增加额外的状态控制变量与方法逻辑。