Vue3&el-upload 实现在组建之外提供一个上传按钮

有这么一个需求,在使用el-upload组件进行文件上传的时候,除了组件默认提供的上传按钮,还要在列表的最前面自定义的加一个上传按钮,点击这个自定义的上传按钮要实现和点击默认的上传按钮同样的全套的上传流程

默认的:

我要的效果:

也就是除了默认的上传还有一个自己定义的上传按钮。

实现的话也很简单:

首先加一个和之前点击的入口,注意是在 el-upload 标签外定义的

复制代码
                    <!-- 自定义的点击上传入口-->
                    <div class="el-upload el-upload--picture-card" 
                        style="margin-bottom: 6px;width: 146px;" @click="chooseFile">
                        <el-button type="primary" >上传本地文件</el-button>
                    </div>

                    <!-- 历史图片展示区 -->
                    <el-upload 
                    ...
                    </el-upload>

然后代码实现模拟点击

复制代码
<script lang="ts" setup>
            ...


        const triggerRef = ref<InstanceType<typeof ElButton>>()
        const uploadRef = ref<InstanceType<typeof ElUpload>>()
        //自定义上传文件
        const chooseFile = ()=> {
            //模拟点击上传按钮
            triggerRef.value?.$.vnode.el?.click();
        }

        ...
</script>

关键的一步就是模拟点击上传的代码。

有疑问可以私信或者留言,这个效果已经实现并发布在我的OCR/表格识别重做的网站里面的,可以先去体验一下是不是你想要的效果。

相关推荐
孤狼warrior1 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉1 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5201 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
一点一木2 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊2 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost2 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
Sheldon一蓑烟雨任平生3 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
BestAns3 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
CsharpDev-奶豆哥3 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化