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 分钟前
🪐 行星科技概念官网!Hero Section 回归!(Three.js ✨)
前端·javascript·three.js
前端拿破轮6 分钟前
ReactNative从入门到性能优化(一)
前端·react native·客户端
码界奇点17 分钟前
Java Web学习 第1篇前端基石HTML 入门与核心概念解析
java·前端·学习·xhtml
云枫晖22 分钟前
Webpack系列-开发环境
前端·webpack
Rverdoser27 分钟前
制作网站的价格一般由什么组成
前端·git·github
拉不动的猪28 分钟前
深入理解 JavaScript 中的静态属性、原型属性与实例属性
前端·javascript·面试
linda261835 分钟前
链接形式与跳转逻辑总览
前端·javascript
怪可爱的地球人40 分钟前
骨架屏
前端
用户6778471506243 分钟前
前端将html导出为word文件
前端
前端付豪1 小时前
如何使用 Vuex 设计你的数据流
前端·javascript·vue.js