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

  }  
}
相关推荐
旺仔Sec5 小时前
2026年度河北省职业院校技能竞赛“Web技术”(高职组)赛项竞赛任务
运维·服务器·前端
用户4099322502125 小时前
Vue的Class绑定对象语法如何让动态类名切换变得直观高效?
前端·ai编程·trae
瘦的可以下饭了5 小时前
Day01-API
javascript
GIS之路5 小时前
GIS 数据转换:GDAL 实现将 CSV 转换为 Shp 数据(一)
前端
Nan_Shu_6146 小时前
学习:Vue (2)
javascript·vue.js·学习
武清伯MVP6 小时前
深入了解Canvas:HTML5时代的绘图利器(一)
前端·html5·canvas
一水鉴天6 小时前
整体设计 定稿 之24 dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q208 之1)
前端·html
北辰alk6 小时前
Vue项目Axios封装全攻略:从零到一打造优雅的HTTP请求层
vue.js
_杨瀚博6 小时前
微信支付集成_JSAPI
前端
polaris_tl6 小时前
react beginwork
前端