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 小时前
Vue 中 vue-awesome-swiper的使用笔记(适配 Vue2/Vue3)
前端·javascript·vue.js
anyup9 小时前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
m0_626535209 小时前
代码分析 长音频分割为短音频
javascript·python·音视频
2***57429 小时前
前端数据可视化应用
前端·信息可视化
xiaoxue..9 小时前
栈的全面解析:ADT、实现与应用
javascript·数据结构·面试
DevUI团队10 小时前
Angular开发者必看:深度解析单元测试核心技巧与最佳实践
前端·javascript·angular.js
Mintopia10 小时前
🌐 动态网络环境下的 WebAIGC 断点续传与容错技术
前端·人工智能·aigc
答案answer10 小时前
一些经典的3D编辑器开源项目
前端·开源·three.js
亿元程序员10 小时前
Creator都快4.0了,怎么能没有这样的功能?
前端
q***649710 小时前
SpringMVC 请求参数接收
前端·javascript·算法