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

通过对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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探索Linux:深入理解各种指令与用法

文章目录 cp指令mv指令cat指令more指令less指令head指令tail指令与时间相关的指令date指令 cal指令find指令grep指令zip/unzip指令总结 上一个Linux文章我们介绍了大部分指令&#xff0c;这节我们将继续介绍Linux的指令和用法。 cp指令 功能&#xff1a;复制文件或者目录 语法…

在 Python 的哪个版本之后,字典的添加顺序与键的顺序是一致的?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 在 Python 的不同版本中&#xff0c;字典&#xff08;dict&#xff09;类型的行为发生了显著变化。在 Python 3.6 及之前的版本中&#xff0c;字典是无序的&#xff0c;这意味着字典在遍历时不能保证按…

图鸟模板-官网:基于Vue 3的前端开发新篇章

一、引言 随着前端技术的飞速发展&#xff0c;企业对于官网的需求也从简单的展示型网站向功能丰富、交互体验良好的方向转变。在这样的背景下&#xff0c;图鸟模板-官网以其基于Vue 3的纯前端开发特性&#xff0c;以及支持微信小程序、支付宝小程序、APP和H5的跨平台能力&…

【.NET Core】你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟

你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟 文章目录 你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟一、概述二、CallerMemberNameAttribute类三、CallerFilePathAttribute 类四、CallerLineNumberAttribute 类…

每个初创企业创始人都应了解的搜索引擎优化基础知识

会话式AI引擎&#xff1a;如何革新您的业务通讯&#xff1f; 对于已经身兼数职的初创企业创始人来说&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;似乎是一项艰巨的任务。然而&#xff0c;在数字时代&#xff0c;它是推动流量、建立品牌知名度和实现长期成功不可或缺的…

Golang编译优化——稀疏条件常量传播

文章目录 一、概述二、稀疏条件常量传播2.1 初始化worklist2.2 构建def-use链2.3 更新值的lattice2.4 传播constant值2.5 替换no-constant值 一、概述 常量传播&#xff08;constant propagation&#xff09;是一种转换&#xff0c;对于给定的关于某个变量 x x x和一个常量 c …

c++ 归并排序

归并排序是一种遵循分而治之方法的排序算法。它的工作原理是递归地将输入数组划分为较小的子数组并对这些子数组进行排序&#xff0c;然后将它们合并在一起以获得排序后的数组。 简单来说&#xff0c;归并排序的过程就是将数组分成两半&#xff0c;对每一半进行排序&#xff0c…

车辆运动模型中LQR代码实现

一、前言 最近看到关于架构和算法两者关系的一个描述&#xff0c;我觉得非常认同&#xff0c;分享给大家。 1、好架构起到两个作用&#xff1a;合理的分解功能、合理的适配算法&#xff1b; 2、好的架构是好的功能的必要条件&#xff0c;不是充分条件&#xff0c;一味追求架构…

贝壳面试:MySQL联合索引,最左匹配原则是什么?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 1.谈谈你对MySQL联合索引的认识&#xff1f; 2.在MySQ…

【强训笔记】day20

NO.1 思路&#xff1a;先判断能对砍几个回合&#xff0c;取最小值&#xff0c;因为回合数是整数&#xff0c;所以可能存在都大于0的情况&#xff0c;再判断一下如果都存活就再对砍一次&#xff0c;直到一家存活或者都死亡。 代码实现&#xff1a; #include<iostream>u…

即插即用篇 | YOLOv8 引入多光谱通道注意力 | 频率领域中的通道注意力网络

本改进已集成到 YOLOv8-Magic 框架。 注意力机制,尤其是通道注意力,在计算机视觉领域取得了巨大成功。许多工作聚焦于如何设计高效的通道注意力机制,同时忽略了一个基本问题,即通道注意力机制使用标量来表示通道,这很困难,因为会造成大量信息的丢失。在这项工作中,我们从…

OGG几何内核开发-BRepAlgoAPI_Fuse与BRep_Builder.MakeCompound比较

最近在与同事讨论BRepAlgoAPI_Fuse与BRep_Builder.MakeCompound有什么区别。 一、从直觉上来说&#xff0c;BRepAlgoAPI_Fuse会对两个实体相交处理&#xff0c;相交的部分会重新的生成相关的曲面。而BRep_Builder.MakeCompound仅仅是把两个实体组合成一个新的实体&#xff0c;…

【一支射频电缆的诞生】GORE 戈尔

工具连接&#xff1a; https://microwave-cablebuilder.gore.com/ 控制参数&#xff1a; 连接器&#xff1a; 欣赏

Ubuntu18.04--虚拟机配置Samba并从Windows登录

前言&#xff1a; 本文记录我自己在Windows上安装 Virtualbox &#xff0c;并在Virtualbox中安装 Ubuntu-18.04 虚拟机&#xff0c;在Ubuntu-18.04虚拟机里安装配置Smaba服务器&#xff0c;从 Windows 宿主系统上访问虚拟机共享samba目录的配置命令。 引用: N/A 正文 虚拟…

《Python编程从入门到实践》day25

# 昨日知识点回顾 如何创建多行外星人 碰撞结束游戏 创建game_stats.py跟踪统计信息 # 今日知识点学习 第14章 记分 14.1 添加Play按钮 14.1.1 创建Button类 import pygame.font# button.py class Button:def __init__(self, ai_game, msg):"""初始化按钮…

【GESP】2023年12月图形化二级 -- 小杨报数

小杨报数 【题目描述】 小杨需要从 1 1 1到 N N N报数。在报数过程中&#xff0c;小杨希望跳过 M M M的倍数。例如&#xff0c;如果 N 5 N5 N5&#xff0c; M 2 M2 M2&#xff0c;那么小杨就需要依次报出 1 1 1&#xff0c; 3 3 3&#xff0c; 5 5 5。 默认小猫角色和白色背…

zblog中用户中心-邀请码注册插件的导出功能补充

自己加了一个导出未使用的邀请码功能&#xff0c;可惜我不是入驻作者&#xff0c;没有权限发布&#xff0c;之前被一条大河拒了&#xff0c;他说我抄他代码&#xff0c;不给我过审还冷嘲热讽&#xff0c;我一气之下&#xff0c;就没继续申请了&#xff0c;话说我是专业搞java开…

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

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

ADS1220芯片利用自身温度传感器测试自身温度

一、简介 ADS1220 内部集成了一个精密温度传感器&#xff0c;通过将寄存器的TS位置1可使能温度传感器模式。 在温度传感器模式下&#xff0c; 配置寄存器 0 的设置不产生任何影响&#xff0c;该器件使用内部基准进行测量&#xff0c;与所选基准电压源无关。 温度读数过程与模拟…

SELECT SUM用法和ZMM008入货登记号大于可入仓量

select sum 用法示例 入货登记号大于可入仓量 之前错误的写法