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

11 篇文章 0 订阅
5 篇文章 0 订阅
一、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-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/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>

  • 16
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 21
    评论
Vue,`el-upload` 是 Element UI 提供的一个非常方便的文件上传组件。它结合了拖放功能和普通文件择器,可以轻松处理文件上传操作。以下是如何在 Vue 使用 `el-upload` 的基本步骤: 1. 引入依赖:首先在你的项目安装 Element UI 并引入 `el-upload` 组件。在 `main.js` 或者相应的入口文件添加: ```javascript import { ElUpload } from 'element-plus'; ``` 2. 在模板使用组件:在需要上传文件的地方添加 `<el-upload>` 标签,并设置一些基本属性,如上传路径、上传方法等。 ```html <template> <div> <el-upload :action="uploadUrl" // 上传的服务器地址 :on-success="handleSuccess" // 上传成功后的回调 :on-error="handleError" // 上传失败后的回调 :file-list="fileList" // 当前已上传文件的列表 :auto-upload="false" // 默认不自动上传,需要手动触发上传 drag accept="image/*" // 可接受的文件类型,这里仅支持图片 > <el-button>点击上传</el-button> </el-upload> </div> </template> ``` 3. 数据绑定和方法定义:在对应的 Vue 实例定义变量和方法,如 `uploadUrl`、`fileList`、`handleSuccess` 和 `handleError`。 ```javascript <script> export default { data() { return { uploadUrl: '/api/upload', // 你的上传接口地址 fileList: [], // 用于存储上传文件的信息 }; }, methods: { handleSuccess(response, file) { // 处理上传成功的回调,比如更新状态或数据 this.fileList.push(file); console.log('文件 ' + file.name + ' 上传成功'); }, handleError(error, file) { // 处理上传失败的回调,比如显示错误信息 console.error('文件 ' + file.name + ' 上传失败', error); }, }, }; </script> ```
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

snows_l

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

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

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

打赏作者

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

抵扣说明:

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

余额充值