element-plus组件之Upload(2.0)

news2025/1/15 22:51:11

接上篇

下面的属性就对应着回调函数,下面就一一进行介绍。

因为element-plus在封装upload组件时就自带了一个预览和删除的图标,只是没有方法实现,这里进行指明。

 

就是在图片墙列表中,自动就带了这两个图标和遮罩,下面的属性也与其相关

属性

①on-preview

 :on-preview="handlePreview",通过标签上属性的设置,我们来书写回调函数

  const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log('我是预览')
    console.log(uploadFile);
    
  }

 这样就可以看到这个回调函数的触发时机,就是我们点击每一个图标的时候触发,然后我们打印默认传递的参数来看看

我们可以看到,默认的参数就是我们点击的图片的详细信息,我们比较常用的就是URL属性,这样,就可以保存这张图片对应的地址信息,以便于本地收集和后续发送给后端。

 ②on-remove

同理,这个就是对应这哪个删除图标的回调调用时机,但是再触发该属性的钩子函数之前,还会触发另一个属性对应的钩子函数,就是:before-remove="beforeRemove"

 const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
      `Cancel the transfert of ${uploadFile.name} ?`
    ).then(
      () => true,
      () => false
    )
  }

 官网的案例就是用到了element的另一个组件ElmessageBox,消息盒子,对应的链接直接贴出来,就暂时不详细介绍了,毕竟主题是upload组件,MessageBox 消息弹框 | Element Plus

 当我们点击时出现的弹出框

删除后,对应的控制台就会打印我们 on-remove的回调

 

  const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
  }

它拥有两个参数,显而易见,第一个参数就是删除的文件对象,第二个参数就是删除的文件数组,这里如果再做批量删除的业务时,此处就会显示数组中多个被删除的文件对象。

③on-success

④on-error

因为没有后端的服务器,上传成功的钩子打印结果看不出来,类比于失败的效果如下

  const handleError=(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles)=>{
    console.log('上传失败')
    console.log('error',error)
    console.log('uploadFile',uploadFile)
    console.log('uploadFiles',uploadFiles)
  }

 

⑤on-progress

  const handleProgress=(event: ProgressEvent, uploadFile: UploadFile)=>{
    console.log('上传进度')
    console.log(event)
    console.log(uploadFile)

   }

第一个参数为上传进度对应的事件对象,第二个参数为上传的文件信息

 

⑥on-change

这个属性多用于再用户频繁修改上传的文件,就是在切换上传文件的时候触发

<template>
    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
        :on-change="handleChange">
        <img v-if="props.avatar" :src="uploadAvatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>

</template>
/**
 * 文件变化时的处理函数
 *
 * @param file 文件对象
 * @param fileList 文件列表
 * @returns 无返回值
 */
const handleChange = (file:any, fileList:any) => {
    // 打印文件信息
    // 触发名为 "Mchange" 的事件,并传递文件原始数据作为参数

    emit("Mchange",file.raw)
}

 

⑦on-exceed

该属性经常与limit相互使用,当超过最大上传文件数量时,就会调用该属性的钩子函数

 

⑧before-upload

可以统一类比与上传文件的生命周期,该属性的钩子函数是最先执行的,顺序如下:before-upload-on-progress-成功on-success/失败on-error

   const beforeUpload=( uploadFile: UploadUserFile) => {
    console.log('开始上传')
    console.log(uploadFile)

   }

参数为上传的文件信息

 

⑨before-remove

总结: 这些调用回调函数的属性的执行顺序如下:上传前before-upload--上传过程on-progress--上传成功on-success/上传失败on-error--》后续操作--预览on-preview----切换on-change----删除前before-remove--删除on-remove,最后是一个上传限制on-exceed。在不同的阶段使用不同的属性,来执行不同的回调,做出相应的操作,完成时机场景中的功能需求。

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

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

相关文章

论文笔记:Prototypical Verbalizer for Prompt-based Few-shot Tuning

论文来源&#xff1a;ACL 2022 论文地址&#xff1a;https://arxiv.org/pdf/2203.09770.pdfhttps://arxiv.org/pdf/2203.09770.pdf 论文代码&#xff1a;https://github.com/thunlp/OpenPrompthttps://github.com/thunlp/OpenPrompt Abstract 基于提示的预训练语言模型&#…

Windows 下 cocos2d-x-3.17.2 VS2017开发环境搭建

1.下载cocos2d-x-3.17.2 源码: Cocos2d-x - 成熟、轻量、开放的跨平台解决方案 2.下载Python2 Python 2.7.0 Release | Python.org 加入环境变量: 测试版本

用无人机视角,打开哀牢山!

哀牢山危险且神秘&#xff0c;使用无人机进行探索可以极大地提高安全性和效率。通过无人机的关键性能&#xff0c;将哀牢山的情况记录并传输出来 一、高清摄像与图像传输 高清摄像头&#xff1a;无人机通常搭载高分辨率的摄像头&#xff0c;能够捕捉到哀牢山细腻的自然景观和…

如何通过wos进行论文的他引的查找

本帖子主要介绍的是 如何通过wos进行论文的“他引量”的查找。 首先&#xff0c;对于一篇论文&#xff0c;在wos中进行查找的时候&#xff0c;一定要选择&#xff1a; 然后点进去搜索&#xff0c;点击 citations: 在返回的页面选择researcher profiles 一栏的 See all: 然后在…

Allan方差分析是否需要补充确定性误差

MEMS器件陀螺仪与加表存在确定性误差和随机误差&#xff0c;确定性误差可以通过转台标定&#xff0c;比较麻烦&#xff0c;也可以使用手动转动的方式&#xff0c;通过非线性优化的方式获取&#xff0c;github上已有开源程序包&#xff0c;可参见博文https://blog.csdn.net/chen…

使用DSPy优化提示词

使用DSPy优化提示词 🌐 前言 DSPy doc地址 DSPy github DSPy arxiv 在机器学习中,使用语言模型(LM)构建复杂系统常常很麻烦。传统方法需要一步步优化,每次调整都得重新整理,容易出错。而且,手动写提示词时,我们往往不知道改了以后会变好还是变坏,这让整个过程变得更…

Android Studio开发Kotlin项目中遇到的问题解决集

背景&#xff1a;Android Studio 2022.3.1 1.Unexpected tokens (use ; to separate expressions on the same line) 无法在同一行声明一个变量并实例化。 解决&#xff1a;分开 &#xff08;1&#xff09; var aaCo:Runoob<String>aaCoRunoob("aa") &…

基于springboot校园社团信息管理系统

校园社团信息管理系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了校园社团信息管理系统的开发全过程。通过分析校园社团信息管理系统管理的不足&#xff0c;创建了一个计算机管理校园社团信息管理系统的…

多元化外链策略如何最大化SEO效果?

只要观察过一些大网站都知道&#xff0c;单一的外链建设策略通常不足以支撑长期的排名提升。成功的网站都是有很多多元化的外链的&#xff0c;这样外链结构的复杂性和多样性就能确保&#xff0c;所以GPBGNBGMB的外链策略是目前效果最好的外链组合 根据市场数据&#xff0c;排名…

服务器停止响应是什么原因造成的?

“服务器停止响应”或“网页不可用”消息意味着通信中断。当您尝试访问 Web 应用或网站时&#xff0c;您的设备会向托管该应用或网站的远程 Web 服务器发送请求。然后&#xff0c;服务器会处理此请求并返回要显示的网页内容。但是&#xff0c;如果服务器遇到问题并且无法回复预…

java-vue304_springboot智慧旅游系统 w4aanb5e

目录 功能和技术介绍系统实现截图技术范围开发核心技术介绍&#xff1a;代码执行流程核心代码部分展示系统测试其他springboot项目推荐详细视频演示源码获取 功能和技术介绍 探索如何设计一个用户友好、响应迅速的系统界面&#xff0c;确保系统后端逻辑的高效和稳定性。研究如…

Fastgpt本地化部署 - 以MAC为例

1.认识fastgpt 2.私有化部署 MongoDB&#xff1a;用于存储除了向量外的各类数据PostgreSQL/Milvus&#xff1a;存储向量数据OneAPI: 聚合各类 AI API&#xff0c;支持多模型调用 &#xff08;任何模型问题&#xff0c;先自行通过 OneAPI 测试校验&#xff09; &#xff08;1&a…

基于vue框架的党建系统j9hzh(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;组织管理员,成员,通知公告,组织信息,组织成员,入党材料,会议信息,活动签到,消息通知,学习视频 开题报告内容 基于Vue框架的党建系统开题报告 一、研究背景 随着信息技术的飞速发展&#xff0c;党建工作作为党的建设的重要组成部分&am…

单脉冲阵列和差波束形成实现比幅测角法(MATLAB仿真)

单脉冲阵列和差波束形成实现比幅测角法&#xff08;MATLAB仿真&#xff09; 文章目录 前言一、和差波束形成二、比幅测角法原理三、MATLAB仿真四、MATLAB仿真代码(超详细)单脉冲阵列和差波束形成实现比幅测角法MATLAB仿真超详细代码 总结 前言 单脉冲雷达天线要求产生一个主瓣…

Mysql—高可用集群MHA

1:什么是MHA&#xff1f; MHA&#xff08;Master High Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切…

GitLab Runner 通过 Pipeline 流水线实现持续集成 CI

文章目录 1、基础环境2、安装 Docker3、安装 GitLab4、安装 JDK5、安装 Maven6、安装 GitLab Runner7、注册 GitLab Runner8、上传 GitLab9、配置 Pipeline 1、基础环境 本次演示搭建&#xff0c;我使用的是阿里云服务器&#xff0c;配置如下&#xff1a; 服务器1&#xff1a;…

web 0基础第一节 文本标签

这是一个html文件的基本结构 在vs code 中使用英文的 ! 可快捷设置这样的结构 <!-- --> 是在html写注释的结构 <!DOCTYPE html> <!--标识当前文档类型为html--> <html> …

由于找不到msvcp140.dll而陷入困境?从系统更新到文件修复的全方位应对策略

由于找不到msvcp140.dll&#xff0c;不少电脑用户陷入了困惑之中。在计算机的复杂生态系统里&#xff0c;dll&#xff08;动态链接库&#xff09;文件是一种共享的资源库&#xff0c;而msvcp140.dll更是与特定的编程环境和软件运行息息相关。它就像是一座桥梁&#xff0c;连接着…

企业内部文档安全外发如何挑选合适的外发系统?

企业文档的外发不仅关系到运营效率&#xff0c;更是信息安全的重要组成部分。面对B2B模式下文档交换的普遍性和重要性&#xff0c;企业内部文档的安全外发成为了众多公司关注的重点之一。 随着互联网技术的发展&#xff0c;企业之间的合作越来越紧密&#xff0c;文档的交流也变…

数字电路尚硅谷学习笔记

学习视频&#xff1a;01_数字电路_从零搭建计算机引导_哔哩哔哩_bilibili 第1章数字电路基础 1.引言 数字电路是现代科技和工程领域中不可或缺的基础。从计算机系统到通信设备&#xff0c;从家庭电子产品到工业自动化&#xff0c;数字电路无处不在&#xff0c;影响着我们的生…