el-upload 同时选取多文件上传,文件列表却只传了一个

背景:使用element的上传组件,在使用多文件上传时,发现如果同时选择两个文件,上传完成之后,upload组件的列表只显示一个文件。

通过查看控制台发现on-success方法在上传文件时,只执行了一次。返回的两个文件,其中一个状态是uploading。而我们取文件又只取了status是success的文件。

解决:重点在于on-success中的那句文件列表上传状态的判断 (Vue3版本)

javascript 复制代码
// 上传成功回调
function handleUploadSuccess(res: any, file: any,fList) {
//等待所有文件都上传完成,这里注意fList是所有的文件(包含已上传的)
  if (fList.every(v => v.status == 'success')) {
    console.log('处理字段')
    //处理字段
    fList.map(item => {
  item.response && uploadList.value.push({
 name: item.response.data.original,
 url: item.response.data.attachUrl,
 id:item.response.data.id }); //只push新上传的 (带有response)
            })
    emit('change',  uploadList.value);

  }  
}
相关推荐
万少2 小时前
Vibe Coding不停歇,移动端 TRAE SOLO 让你用手机也能编程啦
前端·javascript·后端
kyriewen112 小时前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
开发语言·前端·javascript·c++·单元测试·ecmascript
烛衔溟3 小时前
TypeScript 接口的基本使用 —— 定义对象形状
前端·javascript·typescript
铁皮饭盒4 小时前
成为AI全栈 - 第3课:路由 RESTful Elysia 状态码 设计规范
前端·后端·全栈
顾昂_4 小时前
Web 性能优化完全指南
前端·面试·性能优化
IT乐手4 小时前
Claude Code + Qwen 的配置方法
javascript·claude
前端程序媛-Tian5 小时前
前端 AI 提效实战:从 0 到 1 打造团队专属 AI 代码评审工具
前端·人工智能·ai
支付宝体验科技5 小时前
Ant Design Pro v6.0.0 发布
前端
T畅N5 小时前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
AlunYegeer5 小时前
JAVA,以后端的视角理解前端。在全栈的路上迈出第一步。
java·开发语言·前端