首页 > 其他分享 >element-ui plus中如何单独出发el-upload提交

element-ui plus中如何单独出发el-upload提交

时间:2023-03-31 17:57:49浏览次数:42  
标签:el upload submit element 组件 uploadRef ref

  • 因为单独提交才好触发el-upload中的on-success函数

  • 在 Vue 3 中,可以通过 ref 引用指向 upload 组件,然后使用该引用调用 upload 的 submit 方法来触发上传操作。具体实现如下:

<template>
  <el-upload ref="uploadRef" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const uploadRef = ref(null);

    const handleSubmit = () => {
      // 在这里编写提交动作的代码
      uploadRef.value.submit();
    };

    return {
      uploadRef,
      handleSubmit,
    };
  },
};
</script>

在上述例子中,我们通过 ref 创建了一个名为 uploadRef 的引用,指向了 组件。
然后,在 handleSubmit 方法中,我们通过调用 uploadRef.value.submit() 来触发上传操作。

  • 注意:由于 Vue 3 中的组件实例是在 setup 阶段创建的,因此无法在模板中直接使用 $refs 来访问组件实例。而是需要通过 ref 引用来进行访问和操作。

标签:el,upload,submit,element,组件,uploadRef,ref
From: https://www.cnblogs.com/pansidong/p/17277045.html

相关文章

  • 更改el-table样式
    要更改el-table的样式,您可以使用以下方法:通过CSS更改样式:您可以使用CSS更改表格的样式,例如更改表头、行、单元格等的颜色、字体、背景等属性。可以通过给元素添加类名或使用选择器来选择元素并应用样式。例如:/*更改表头背景颜色*/.el-table__header{background-col......
  • postrelevant
    爬虫中post相关HTTP数据传输先来看看HTTP是如何传输表单数据的。HTTP是以ASCII码传输的,建立在TCP/IP协议之上的应用层规范。规范把HTTP请求分为三个部分:状态行、请求头、消息主体。类似于下面这样:<method><url><version><headers><entity-body>#例如:#请求行......
  • 秀米新技能:如何在秀米推文中上传附件?如Word、Excel、PPT、PDF等
    发表公众号推文的时候,有不少人使用秀米作为公众号的图文排版工具。作为深受运营人喜爱的一款排版工具,排版案例拿来即用,方便了不少我们这种爱偷懒的运营人。在实际的运营工作中,我们经常需要在公众号发表一些带有附件的文章,比如岗位需求表、报名申请表、成绩公示表、比赛晋级名单、......
  • ubuntu kernel 更新
    参考: https://wiki.ubuntu.com/Kernel/BuildYourOwnKernel如果希望修改kernel部分的配置,如CONFIG_RT_GROUP_SCHED,打开cgroup对RT的支持,可以在debian.master/config/annotations中找到配置项,把相应平台的'n'改成‘y'  网上搜到其它文章,从kernel.org下载原始版本编译更新的......
  • 谷歌Chrome浏览器内直接打开编辑保存Office Word、Excel、PPT 文档,可离线部署!
    谷歌Chrome经过开发团队不断优化,凭借运行界面简单,打开速度最快及扩展插件众多,Chrome已经成为了世界上最受欢迎的浏览器。不过有一点非常可惜,由于微软Office不是开源程序,所以Chrome一直无法直接打开微软Office文档。虽然后来有一些国内厂商通过调用微软免费开源的ActiveX控件DsoFr......
  • elasticsearch手动控制分片分布
    elasticsearch可以通过rerouteapi来手动进行索引分片的分配。不过要想完全手动,必须先把cluster.routing.allocation.disable_allocation参数设置为true,禁止es进行自动索引分片分配,否则你从一节点把分片移到另外一个节点,那么另外一个节点的一个分片又会移到那个节点。......
  • elasticsearch更改node id生成方法
    集群中节点的id是由discovery定义的,默认es有两种实现方式,一种是org.elasticsearch.discovery.local.LocalDiscovery表示把es的节点启动在同一个jvm的环境下,这样就可以通过AtomicLong来进行数字递增的id生成。另一种是org.elasticsearch.discovery.zen.ZenDiscovery它是分......
  • Excel批量检查5列数值是否相等(存在不规则空值)
    因存在位置未知的空值,需要两两空值判断再进行比较,所以5列两两相比有10种可能,需要全面考虑,缺一都可能导致数据不准确(空值位置影响)案例中当前单元格的函数:=AND(IF(OR(B3="",C3=""),TRUE,B3=C3),IF(OR(C3="",D3=""),TRUE,C3=D3),IF(OR(D3="",E3=""),TRUE,D3=E3),IF(OR(E3="&q......
  • SHELL创建钉钉群接入机器人推送报警信息(text消息类型)
    步骤一:获取自定义机器人Webhook选择需要添加机器人的群聊,然后依次单击群设置 > 智能群助手。在机器人管理页面选择自定义机器人,输入机器人名字并选择要发送消息的群,同时可以为机器人设置机器人头像。 完成必要的安全设置,勾选我已阅读并同意《自定义机器人服务......
  • python selenium 判断元素是否存在,实现:找到元素,执行对应的代码;找不到元素,继续执行其他
    selenium因为找不到元素会抛出异常,导致执行结束可以考虑使用driver.find_elements(),找不到元素时就会返回空列表,使用if-else语句,判断列表是否为空,非空,则正常找到元素,进行后续代码执行;空,则直接跳过,执行其他代码iflen(driver.find_elements())!=0#判断列表的长度是否为0......