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);

  }  
}
相关推荐
毕设源码-朱学姐9 分钟前
【开题答辩全过程】以 基于Web的餐饮管理系统的设计为例,包含答辩的问题和答案
前端
MoonPointer-Byte11 分钟前
[特殊字符]The Omniscient Tome | 全知之书
javascript·html5
fanruitian1 小时前
visualstudio code cline使用mcp amap
java·前端·visual studio
lzh_hz2 小时前
zustand源码解析
前端·源码阅读
无声20172 小时前
Turborepo 的 Docker 化实战
前端·vue.js
韭菜炒大葱2 小时前
React 之 自定义 Hooks 🚀
前端·react.js·面试
用户91743965392 小时前
Magnitude:强!一款基于 Al 视觉的 Web 自动化框架
运维·前端·自动化
POLITE32 小时前
Leetcode 21.合并两个有序链表 JavaScript (Day 10)
javascript·leetcode·链表
止观止2 小时前
告别回调地狱:深入理解 JavaScript 异步编程进化史
javascript·ecmascript·promise·async/await·异步编程·前端进阶
+VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue在线教育学习系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·学习·课程设计