巨坑啊! 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.urlthis.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-uploadref="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.userStorageServiceexport 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.urlthis.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.xdnf.cn/news/1419836.html

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

相关文章

ESP32重要库示例详解(一):EEPROM之Preferences库

1. 了解EEPROM 在嵌入式系统开发中&#xff0c;断电后晚能存储少量数据是常见需求。EEPROM&#xff08;Electrically Erasable Programmable Read-Only Memory&#xff09;是一种非易失性存储器&#xff0c;即使断电数据也不会丢失。ESP32的EEPROM模拟功能利用闪存空间&#x…

Consul踢除失效服务和移除Node节点

1.consul描述 在Consul日常维护中,由于Consul不会自动将不可用的服务实例注销掉和移除node节点. 在实际使用过程中&#xff0c;可能因为一些操作失误、环境变更等原因让Consul中存在一些无效实例信息&#xff0c;而这些实例在Consul中会长期存在&#xff0c;并处于断开状态。…

优化资源利用,用C++内存池点亮编程之路

内存池介绍(Memory Pool): 它是一种内存分配方式&#xff0c;通过预先分配和复用内存块。 在真正使用内存之前&#xff0c;先申请一大块内存备用。当有新的内存需求时&#xff0c;就从内存池中分出一部分内存块&#xff0c; 若内存块不够再继续申请新的内存。如果我们不需要…

进程间通信(一)

IPC 在之前我们也有涉及到进程间通信的知识点&#xff0c;比如fork或exec或父进程读取子进程的退出码等&#xff0c;但是这种通信方式很有限&#xff0c;今天来学习进程间通信的其他技术——IPC&#xff08;InterProcess Communication&#xff09;。 IPC的方式通常有管道&…

JS代码随想录(一):数组

代码随想录 一、数组理论基础 二、LeetCode 704. 二分查找 三、LeetCode 27. 移除元素 四、LeetCode 977.有序数组的平方 五、LeetCode 209.长度最小的子数组 六、LeetCode 59.螺旋矩阵II 七、数组总结 一、数组理论基础 数组是存放在连续内存空间上的相同类型数据的集合。 数组…

vue3+TS或JS, 实现粒子特效 @tsparticles/vue3

在跟着B站视频BV11s4y1a71T学习时&#xff0c;使用到了粒子效果&#xff0c;但是以下这种情况只适用于项目是基于typescript的写法&#xff0c;否则无法实现。 粒子效果 VUE3TStsparticles/vue31、安装2、main.ts 引入3、App.vue4、效果 VUE3JS非最新版1、安装低版本的vue3-pa…

生信人写程序1. Perl语言模板及配置

生物信息领域常用语言 个人认为&#xff1a;是否能熟悉使用Shell(项目流程搭建)R(数据统计与可视化)Perl/Python/Java…(胶水语言&#xff0c;数据格式转换&#xff0c;软件间衔接)三门语言是一位合格生物信息工程师的标准。 生物信息常用语言非常广泛&#xff0c;我常用的有…

5/11后面部分:+顺序排序+元素交换+计算每门课程的各种成绩+存放规律的数据 注意:一味的复制肯定要出问题,第2个的最后一部分有修改,注意观察

目录 第一个已经输出过一次&#xff1a; 第二个: 编程实现&#xff1a;程序功能是用起泡法对数组中n个元素按从大到小的顺序进行排序。 ​编辑的确出现了一些问题哦&#xff1a; ​编辑目前是可以运行&#xff0c;但AI不给我们通过&#xff1a; 最后还是我的代码获胜&#x…

SAP-CentralFinance - 会计核算中的组织要素 - 学习心得1

1. 定义SAP组织架构和理解各组织架构含义 组织结构遍布SAP 系统的所有重要功能范围。FI 中最重要的组织要素是公司代码。它是“财务会计”中的最小组织单位,可以为其编制自主式完整科目集供外部报告使用。其他重要的组织要素是利润中心业务范围和段。您可以为各个利润中…

基于Vue3与ElementUI Plus的酷企秀场景可视化DIY设计器探索(更新版)

一、引言 在当今数字化快速发展的时代&#xff0c;企业对于展示自身形象、产品细节以及提升客户体验的需求日益增强。酷企秀场景可视化DIY设计器&#xff0c;以其强大的功能和灵活的定制性&#xff0c;为企业提供了从VR全景展示到地图可视化、电子画册制作等一系列数字化解决方…

vue3使用高德地图

一、获取高德地图key和秘钥 1、注册高德开放平台账号 #高德地图开放平台地址 https://lbs.amap.com/2、创建应用和key(选择web端) 二、安装vuemap/vue-amap库 库地址&#xff1a;https://vue-amap.guyixi.cn/zh-cn/introduction/install.html // 安装核心库 npm install vu…

[ue5]编译报错:使用未定义的 struct“FPointDamageEvent“

编译报错&#xff0c;错误很多&#xff0c;但很明显核心问题是第一个&#xff1a;使用未定义的 struct“FPointDamageEvent“&#xff1a; 程序没有找到FPointDamageEvent的定义。 解决办法&#xff1a; 处理这类未定义都可以先F12&#xff0c;找到它的库位置&#xff0c;之后…

py黑帽子学习笔记_网络编程工具

tcp客户端 socket.AF_INET表示使用标准IPV4地址和主机名 SOCK_STREAM表示这是一个TCP客户端 udp客户端 udp无需连接&#xff0c;因此不需要client.connect这种代码 socket.SOCK_DGRAM是udp的 tcp服务端 server.listen(5)表示设置最大连接数为5 发现kill server后端口仍占用…

【Spring Boot】玩转基础 (一篇就够了)

目录 资源 项目地址 PS 一、新建 SpringBoot 项目 1.我这里连接了码云仓库 2.新建项目 2.1不用码云的的创建方式 2.2使用码云的创建方式 3.使用 Spring InitiaIizr 创建项目 4.选择基本 Dependencies 依赖项 5.设置项目与文件编码格式 UTF-8 6.观察我们的项目架构 7.…

论文 学习 Transformer : Attention Is All You Need

目录 概述&#xff1a; 对摘要的理解&#xff1a; 框架解析 按比例缩放的点积注意力 多头注意力机制 前馈神经网络与位置编码 概述&#xff1a; transformer 是一个encoder ——decoder 结构的用于处理序列到序列转换任务的框架&#xff0c;是第一个完全依赖自注意力机制…

软件测试基础知识必备之浅谈单元测试

什么是单元测试&#xff1f; 单元测试是指&#xff0c;对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&#xff0c;这里的最小可测试单元通常是指函数或者类。 单元测试都是以自动化的方式执行&#xff0c;所以在大量回归测试的场景下更能带来…

算法设计与分析 例题解答 解空间与搜索

1.请画出用回溯法解n3的0-1背包问题的解空间树和当三个物品的重量为{20, 15, 10}&#xff0c;价值为{20, 30, 25}&#xff0c;背包容量为25时搜索空间树。 答&#xff1a; 解空间树&#xff1a; 搜索空间树&#xff1a; 2. 考虑用分支限界解0-1背包问题 给定n种物品和一背包…

数据的均匀化分割算法(网格划分法、四叉树法(含C++代码))

数据的均匀化分割主要是指在分割过程中尽可能均匀地将数据点分布在各个子区域中&#xff0c;以保持数据分布的平衡和优化数据结构的性能。以下是几种可以实现数据均匀化分割的方法&#xff1a; 一. 网格划分法 1. 基本概念 虽然传统的网格划分法不是动态调整的&#xff0c;但通…

共享旅游卡免费旅游真实反馈,有图有真相?

新伙伴体验&#xff0c;云南昆大丽6天5晚品质双人游&#xff0c;真实反馈&#xff01;珠海伙伴蔡总&#xff0c;加入千益畅行共享旅游卡团队&#xff0c;自己亲自体验“云南昆大丽6天5晚品质双人游”真实反馈&#xff0c;分享全程内容截图&#xff0c;无半点虚假&#xff01; …

C语言例题36、判断一个数是否是回文数

题目要求&#xff1a;输入一个5位数&#xff0c;判断它是不是回文数。即12321是回文数 #include <stdio.h>int main() {int x;int ge, shi, qian, wan;printf("请输入一个5位数&#xff1a;");scanf("%d", &x);ge x % 10; //个sh…