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

  }  
}
相关推荐
丁哥3 小时前
99.9%纯AI 做了一个ICO图标生成器(免费 全尺寸 不限文件大小)2ICO.CN欢迎品鉴
前端
兆子龙3 小时前
React Native 完全入门:从原理到实战
前端·javascript
哇哇哇哇3 小时前
vue3 watch解析
前端
SuperEugene3 小时前
Vite 实战教程:alias/env/proxy 配置 + 打包优化避坑|Vue 工程化必备
前端·javascript·vue.js
兆子龙3 小时前
一文彻底搞懂 OpenClaw 的架构设计与运行原理(万字长文)
javascript
leafyyuki3 小时前
用 AI 和 SDD 重构 Vue2 到 Vue3 的实践记录
前端·人工智能
boooooooom4 小时前
别再用错 ref/reactive!90%程序员踩过的响应式坑,一文根治
javascript·vue.js·面试
德育处主任4 小时前
『NAS』一句话生成网页,在NAS部署UPage
前端·javascript·aigc
前端老兵AI4 小时前
前端工程化实战:Vite + ESLint + Prettier + Husky 从零配置(2026最新版)
前端·vite
bluceli4 小时前
浏览器渲染原理与性能优化实战指南
前端·性能优化