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

  }  
}
相关推荐
karshey2 分钟前
【Element Plus】Menu组件:url访问页面时高亮对应菜单栏
前端·javascript·vue.js
xiaogg36782 分钟前
系统网站首页三种常见布局vue+elementui
前端·vue.js·elementui
wordbaby13 分钟前
React Router v7 中的 `ErrorBoundary` 详解
前端·react.js
gsls20080813 分钟前
使用xdocreport导出word
前端·python·word
木子李i16 分钟前
flex多行多列布局小技巧
前端
Mintopia23 分钟前
Three.js 自定义几何体:解锁 3D 世界的创造力
前端·javascript·three.js
Mintopia27 分钟前
计算机图形学碰撞检测:数字世界的 “防碰瓷” 秘籍
前端·javascript·计算机图形学
Hilaku28 分钟前
为什么说 CSS 是最被低估的编程语言?
前端·css
Hilaku37 分钟前
我用 Cursor 写了两个月代码,项目代码量不降反升,为什么?
前端·javascript·架构
哀木37 分钟前
识别手写数字,居然可以只靠前端?
前端