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>

  • 15
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 21
    评论
`el-upload` 是 `element-plus` 组件库的一个上传组件,支持上传文件、图片、视频等类型的文件。下面是 `el-upload` 组件的上传、删除功能的示例代码: ```vue <template> <el-upload class="upload-demo" action="/api/upload" :on-success="onSuccess" :on-remove="onRemove" :file-list="fileList" list-type="picture-card" :auto-upload="false"> <i class="el-icon-plus"></i> </el-upload> </template> <script> import { reactive } from 'vue' import axios from 'axios' export default { setup() { const state = reactive({ fileList: [] }) const onSuccess = (response, file, fileList) => { // 上传成功的回调函数 console.log('上传成功') } const onRemove = (file, fileList) => { // 删除文件的回调函数 axios.delete(`/api/file/${file.name}`).then(() => { console.log('删除成功') }) } return { state, onSuccess, onRemove } } } ``` 在这个示例代码,我们假设后端提供了一个上传文件的API,该API的URL为`/api/upload`,同时也提供了一个删除文件的API,该API的URL为`/api/file/${fileName}`,其`fileName`是要删除的文件文件名。 在上传文件时,我们需要设置 `action` 属性为上传文件的API的URL,同时开启 `auto-upload` 属性,表示文件后自动上传。在上传成功时,会触发 `on-success` 属性指定的回调函数。 在删除文件时,我们需要在 `on-remove` 属性指定删除文件的回调函数。在该回调函数,我们向后端发送一个删除文件的请求,请求成功后,调用 `fileList` 对象的 `splice` 方法将该文件文件列表删除。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

snows_l

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

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

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

打赏作者

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

抵扣说明:

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

余额充值