element-plus 如何点击其它位置触发文件上传
原文链接: https://www.xiandanplay.com/article/view?id=16925669181947904&articleCategoryId=16078840161206272
https://www.xiandanplay.com/是我的一个自建的网站,,欢迎大家来踩,多多给些建议,开源不易
ElementPlus虽然为我们提供了文件上传的组件,但是每次使用它都要用<el-upload>包裹这,如下图
但是特殊情况下,我需要用一个按钮或图标去触发这个文件上传,那么需要怎么办呢,其实很简单。
首先我们放一个el-upload组件,把它设置v-show="false",让它从页面上看不见
<el-icon @click="chooseBackgroundImg" size="15px" style="color: #409eff;"> <Edit /> </el-icon> <el-upload v-show="false" with-credentials :action="uploadUrl" show-file-list="false" :on-success="onSuccessUpload" :before-upload="beforeUpload" ref="uploadBackgroundImg"> </el-upload> import { ref, reactive, type Ref } from 'vue'; const uploadBackgroundImg: Ref<UploadInstance> = ref(null); function chooseBackgroundImg() { uploadBackgroundImg.value.$el.querySelector('input').click(); }
然后你就能正常的上传文件,同时调用组件的方法了
原文链接: https://www.xiandanplay.com/article/view?id=16925669181947904&articleCategoryId=16078840161206272
https://www.xiandanplay.com/是我的一个自建的网站,,欢迎大家来踩,多多给些建议,开源不易
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
2020-07-14 作为程序员的我只负责修复旧bug制造新bug