尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

el-upload上传配合$confirm使用的问题

el-upload上传配合$confirm使用的问题
📅 发布时间:2026/6/17 19:58:42

现象:el-upload如果再on-remove,先调用$confirm 点了取消,也删了文件。

解决方案:

1、使用:before-remove钩子

<el-upload
              ref="upload"
              class="m-l-10"
              :limit="1"
              action=""
              :accept="acceptSet(item)"
              :before-upload="validFile"
              :before-remove="e => fileRemove(e, item, index)"
              :file-list="uploadObject[item.type].list"
              :http-request="e => uploadFile(e, item, index)"
            >
              <el-button :disabled="uploadObject[item.type].list.length > 0" type="primary" plain size="small">
                {{ $t('common.addTo') }}
              </el-button>
            </el-upload>
 
2、不管点击的取消还是确定按钮,finally里面都获取到最新数据。
// 文件移除
    async fileRemove(e, item, index) {
      try {
        await this.$confirm(this.$t('tip.confirm.delete'), this.$t('common.warn'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        })

        const res = await configDelete({ roleId: this.$attrs['form-data'].roleDetail.id, type: item.type })
        if (res.code === 200) {
          // this.getList()
          this.msgSuccess(this.$t('tip.success.delete'))
        }
      } catch {
        // 手动维护文件列表以取消删除
        // this.fileList = [...this.fileList]
        return false
      } finally {
        this.getList()
      }
    },

相关新闻

  • 10.20 CSP-S模拟35 改题记录
  • 例子:vue3+vite+router创建导航菜单
  • LGR-246 解题报告

最新新闻

  • args4j子命令实现指南:如何构建类似git的复杂命令行接口
  • c12测试策略终极指南:配置加载的单元测试与集成测试完全解析
  • Self-Replace案例研究:知名开源项目如何使用这个库实现无缝更新
  • 普陀装修指南:八家上海装修公司综合观察 - 资讯焦点
  • Arduino ESP32完整安装教程:从零开始构建物联网开发环境
  • 阿甘|张家界纯玩领队,8年只做一件事:带你好好玩张家界 - 资讯焦点

日新闻

  • 2026年不锈钢卷板厂家推荐排行榜:冷轧热轧/304/201不锈钢卷板,高颜值耐腐蚀源头厂家实力精选 - 企业推荐官【官方】
  • FLUX.1-dev FP8模型实战指南:24GB以下显卡高效部署方案
  • 2026佛山长途搬家价目表:跨省跨市搬家费用完整计算指南 - 从来都是英雄出少年

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号