vue2+elementUI / vue3+elemengUI Plus el-upload点击事件不在el-upload中如何触发选文件(其他按钮触发el-upload上传)

本文介绍了如何使用Vue2和Vue3结合Element UI及Element UI Plus组件库实现文件上传功能。通过示例代码展示了如何设置上传按钮、触发上传操作、定义上传路径及文件类型限制等关键步骤。
一、vue2 + elementUI
template:
<el-button
  size="mini"
  @click="handleReport"
  type="primary"
  :loading="loading"
>
  上传
</el-button>
  
<div class="upload-box" style="display:none">
  <el-upload
    ref="upload"
    class="upload-demo"
    :action="actionUrl"
    :headers="{ 'x-auth-token': token }"
    :limit="1"
    accept=".xls, .xlsx"
    :on-success="successHandle"
    v-loading="downLoading"
    :before-upload="startUpload"
    :show-file-list="false"
    :file-list="fileList"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">请点击上传文件</div>
  </el-upload>
</div>

methods:
// 点击导入
handleReport() {
  this.$refs["upload"].$refs["upload-inner"].handleClick()
},

二、vue3 + elementUI Plus

感谢大佬提供了方法:菠萝啊菠萝蜜_JS,HTML、CSS,Vue-优快云博客icon-default.png?t=N7T8https://blog.youkuaiyun.com/yuy20151225

template:
<el-button type="primary" size="default" @click="handleUpload">上传</el-button>

<div class="upload-box" style="display: none">
  <el-upload ref="uploadRef" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :auto-upload="false" :file-list="fileList">
  </el-upload>
</div>
script 
<script lang="ts" setup>
  import type { UploadInstance } from 'element-plus';
  import { ref } from 'vue';

  const fileList = ref([]);
  const uploadRef = ref<UploadInstance>();

  const handleUpload = () => {
  uploadRef.value.$el.querySelector('input').click();
};
</script>

评论 21
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__冬七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值