巨坑啊! before-upload返回false 会执行on-remove

news2024/12/28 2:55:37

通过对on-remove对应参数的打印,发现回调中的file参数有个status,若是是在before-upload中就被过滤了,就是ready,若是已经上传成功了去点击删除,status是success,就他了。

onRemove(file,fileList){
    if(file.status == 'success'){
        //删除后改变某些状态的代码
    }
    if(file.status == 'ready'){
        //这里应该就是before-upload中返回false时的状况了,还有没有别的状况,未知
    }        
}
 handleRemove(file, fileList) {
// console.log('删除图片', file)
// 防止before-upload返回false时,会删除前一个上传成功的图片
if (file.status == 'success') { 
         let url = file.response?file.response.respData.url:file.url
         this.fileList.splice(this.fileList.findIndex(item => item.url == url), 1)
          this.$emit("update:fileList", this.fileList);
        }
        if(file.status == 'ready'){
            //这里应该就是before-upload中返回false时的状况了,还有没有别的状况,未知
        } 
        // console.log('删除完后剩下的图片', this.fileList)
      },

 

<template>
  <div v-loading="isLoading">
    <el-upload
      ref="upload" 
      action="/jpark-center-mgr/api/jsis/upload/upload2oss"
      multiple
      :limit="3"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :on-exceed="handleExceed" 
      :on-success="handleSuccess" 
      :on-error="handleError" 
      :before-upload="beforeAvatarUpload"
      :file-list="fileList"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div class="el-upload__tip" slot="tip">只能上传{{supportFileExt}}文件,最多上传3张图片,且每张图片不超过5MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible1" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
  import jportalCommon from '@/jportal-common-update'
  let userStorageService = jportalCommon.userStorageService

  export default {
    props: {
      // limit: {
      //   type: Number,
      //   default: 10,
      //   required: false
      // },
      // requestUrl: {
      //   type: String,
      //   default: "/jpark-center-mgr/api/jsis/upload/upload2oss",
      //   required: false
      // },
      // supportFileExt: {
      //   type: String,
      //   default: "jpg/jpeg/png/doc/docx/xls/xlsx/rar/zip",
      //   required: false
      // },
      // limitFileSize: {
      //   type: Number,
      //   default: 10,
      //   required: false
      // },
      fileList: {
        type: Array,
        default: function () {
          return []
        },
        required: true
      }
    },
    data() {
      return {
        isLoading: false,

        // 上传图片
        dialogImageUrl: '',
        dialogVisible1: false,
        supportFileExt: "jpg/jpeg/png",
        limitFileSize: 5, // 5M
       
      }
    },
    methods: {
      // 上传图片
      handleRemove(file, fileList) {
        // console.log('删除图片', file)
        if (file.status == 'success') { // 防止before-upload返回false时,会删除前一个上传成功的图片
          let url = file.response?file.response.respData.url:file.url
          this.fileList.splice(this.fileList.findIndex(item => item.url == url), 1)
          this.$emit("update:fileList", this.fileList);
        }
        if(file.status == 'ready'){
            //这里应该就是before-upload中返回false时的状况了,还有没有别的状况,未知

        } 
        // console.log('删除完后剩下的图片', this.fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible1 = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message({
          type: 'warning',
          message: '最多只能上传3个文件'
        })
      },
      handleSuccess(res, file, fileList) {
        this.isLoading = false;
        // var temp = {};
        // temp.name = file.name;
        // temp.size = Math.round(file.size / 1024);
        this.fileList.push({url: res.respData.url});
        // console.log('this.fileList',this.fileList)
        this.$emit("update:fileList", this.fileList);
        this.$message({
          type: 'success',
          message: '文件上传成功'
        });
      },
      handleError(e, file) {
        this.isLoading = false;
        this.$message({
          type: 'error',
          message: e
        });
      },
      //上传文件对应的函数
      beforeAvatarUpload(file) {
        const surportExt = "."+this.supportFileExt.split("/").join("/.")
        const isRuleFile = file && file.name && surportExt.indexOf(file
          .name.substring(file.name.lastIndexOf(".")).toLowerCase()) != -1;
        const isLt10M = file.size / 1024 / 1024 < this.limitFileSize;
        if (!isRuleFile) {
          this.$message.error('请按指定文件格式上传!');
        }
        if (!isLt10M) {
          this.$message.error('上传文件大小不能超过 '+this.limitFileSize+'MB!');
        }
        if (isRuleFile && isLt10M) {
          this.isLoading = true;
        }
        return isRuleFile && isLt10M;
      },
      clearFiles() {
        this.fileList = [];
        this.$refs.upload.clearFiles();
      }
    },
    watch: {
      
    },
    mounted() {
      
    }
  }
</script>
<style scoped>
  .a-link {
    color: #030303;
    text-decoration: none;
  }

  .a-link:hover {
    color: #4E84FE;
  }

  .upload-button {
    width: 90px;
    height: 90px;
    background: rgba(78, 132, 254, 1);
    border-radius: 4px;
    cursor: pointer;
    float: left;
    line-height: 25px;
    padding-top: 20px;
  }

  .upload-tip {
    float: right;
    width: 350px;
    margin-left: 20px;
    margin-top: 50px;
    text-align: left;
    line-height: 20px;
  }

  .icon-upload {
    width: 14px;
    height: 16px;
  }

  .icon-files {
    width: 15px;
    height: 17px;
    cursor: pointer;
  }

  .content-font {
    color: #030303;
    font-weight: 400;
  }
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1664798.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

redis的双写一致性

双写一致性问题 1.先删除缓存或者先修改数据库都可能出现脏数据。 2.删除两次缓存&#xff0c;可以在一定程度上降低脏数据的出现。 3.延时是因为数据库一般采用主从分离&#xff0c;读写分离。延迟一会是让主节点把数据同步到从节点。 1.读写锁保证数据的强一致性 因为一般放…

Redis——缓存雪崩、缓存穿透、缓存击穿

在项目中&#xff0c;通常会使用数据库比如 MySQL 存储应用数据&#xff0c;但是当数据太多之后&#xff0c;比如多了几十万条或上百万条的商品信息&#xff0c;这个时候查询商品数据的速度会很慢&#xff0c;影响用户体验。此时一般我们会选择将部分商品信息缓存起来&#xff…

【Rollup】用rollup从0到1开发一个js插件并发布到npm

Rollup 是一个 JavaScript 模块打包器&#xff0c;专注于打包 ES6 模块将其编译回多种模块化格式&#xff0c;尤其适合打包库和框架&#xff0c;因为它可以生成更小、更高效的代码&#xff0c;并且特别适合将代码打包成可在浏览器中使用的库。 从0到1开发js插件 1.创建文件夹…

2.前端路由的配置和使用

一&#xff0c;路由的作用 路由的作用就是将页面文件跟URL地址形成对应匹配 二&#xff0c;如何安装路由 这里我们采用pnpm的方式在项目中执行 pnpm install vue-routernext --save三&#xff0c;路由如何使用 首先创建一个我们需要访问的页面文件&#xff0c;这里我先创建…

机器学习:葡萄酒品质预测

说明&#xff0c;此项目是我的期末大作业&#xff0c;包括了对数据集探索&#xff0c;预处理以及分类的各个详细过程与描述&#xff0c;代码简单&#xff0c;主要是一个分类项目的流程&#xff0c;并没有对模型进行深度研究&#xff0c;因此我写在这里。 目录 一、问题介绍 …

ETL工具kettle(PDI)入门教程,Job

先新建两个Transform&#xff0c;MysqlToMysql.ktr和CsvToExcel.ktrURL&#xff1a;ETL工具kettle入门教程&#xff0c;transform&#xff0c;Mysql-&#xff1e;Mysql&#xff0c;Csv-&#xff1e;Excel-CSDN博客 主对象树&#xff0c;作业上右击&#xff0c;点击新建 核心对…

Unity引擎是什么?有哪些优点

大家好&#xff0c;我是咕噜土豆&#xff0c;很高兴又和大家见面了。今天我们一起来了解一下Unity引擎和它有哪些优点。 首先带大家了解什么是Unity引擎 Unity引擎是一款由Unity Technologies开发的跨平台游戏开发引擎&#xff0c;广泛用于创建2D和3D游戏以及其他交互式内容&…

uniapp管理后台编写,基于uniadmin和vue3实现uniapp小程序的管理后台

一&#xff0c;创建uniAdmin项目 打开开发者工具Hbuilder,然后点击左上角的文件&#xff0c;点新建&#xff0c;点项目。如下图。 选择uniadmin&#xff0c;编写项目名&#xff0c;然后使用vue3 记得选用阿里云服务器&#xff0c;因为最便宜 点击创建&#xff0c;等待项目创…

AI跟踪报道第41期-新加坡内哥谈技术-本周AI新闻:本周Al新闻: 准备好了吗?事情即将変得瘋狂

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

在Spring Boot应用安装SSL证书

目录 前提条件 步骤一&#xff1a;下载SSL证书 步骤二&#xff1a;在Spring Boot安装SSL证书 步骤三&#xff1a;验证SSL证书是否安装成功 前提条件 已通过数字证书管理服务控制台签发证书SSL证书绑定的域名已完成DNS解析&#xff0c;即您的域名与主机IP地址相互映射已在W…

ASP.NET学生信息管理系统

摘 要 本文介绍了在ASP.net环境下采用“自上而下地总体规划&#xff0c;自下而上地应用开发”的策略开发一个管理信息系统的过程。通过分析某一学校学生管理的不足&#xff0c;创建了一套行之有效的计算机管理学生的方案。文章介绍了学生管理信息系统的系统分析部分&#xff0c…

【C++ | 函数】默认参数、哑元参数、函数重载、内联函数

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-05-04 1…

Linux —— 信号(4)

Linux —— 信号&#xff08;4&#xff09; 信号的处理用户态和内核态 信号的捕捉sigaction sa_mask字段volatileSIGCHLD信号 我们今天接着来看信号&#xff1a; 信号的处理 信号的处理简单一句话就是在内核态处理的。 用户态和内核态 用户态和内核态是操作系统和计组中的概…

MySQL系列之索引

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…

【声呐仿真】学习记录2-运行ROV(带camera、sonar、dvl等传感器)例程

【声呐仿真】学习记录2-运行ROV&#xff08;带camera、sonar、dvl等传感器&#xff09;例程 前言第一阶段-学习Gazebo第二阶段-学习URDF、xacro第三阶段-寻找例程跑一个rexrov示例程序1.uuvsimulator quick_start2.能键盘控制的示例程序&#xff08;失败&#xff09;3.能键盘控…

[初阶数据结构】单链表

前言 &#x1f4da;作者简介&#xff1a;爱编程的小马&#xff0c;正在学习C/C&#xff0c;Linux及MySQL。 &#x1f4da;本文收录于初阶数据结构系列&#xff0c;本专栏主要是针对时间、空间复杂度&#xff0c;顺序表和链表、栈和队列、二叉树以及各类排序算法&#xff0c;持…

【Python系列】字节串与字典字节串

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【高校科研前沿】北师大陈晋教授团队在遥感顶刊发表最新成果:ClearSCD模型:在高空间分辨率遥感影像中综合利用语义和变化关系进行语义变化检测

01文章简介 论文名称&#xff1a;The ClearSCD model: Comprehensively leveraging semantics and change relationships for semantic change detection in high spatial resolution remote sensing imagery&#xff08;ClearSCD模型&#xff1a;在高空间分辨率遥感影像中综合…

Nextcloud私有云盘-重新定义云存储体验

Nextcloud私有云盘-重新定义云存储体验 1. 什么是Nextcloud ​ Nextcloud是一个开源的云存储和协作平台&#xff0c;旨在为个人用户、企业和团队提供安全、隐私保护的数据存储和共享解决方案。它允许您在不同设备之间同步、共享文件&#xff0c;提供了强大的协作工具和应用生…

VSCode:设置顶部文件标签页滚动条的宽度

使用VSCode打开多个文件后&#xff0c;顶部的文件标签可以通过滚动条进行滚动&#xff0c;但是缺点是该滚动条太窄了&#xff0c;不好选择。 可以通过如下方法修改改滚动条的宽度&#xff1a; 1.点击设置 2.选择工作台->编辑管理->Title Scrollbar Sizing->Large 3.可…