element-plus 如何点击其它位置触发文件上传

ElementPlus虽然为我们提供了文件上传的组件，但是每次使用它都要用包裹这，如下图

但是特殊情况下，我需要用一个按钮或图标去触发这个文件上传，那么需要怎么办呢，其实很简单。

首先我们放一个el-upload组件，把它设置v-show="false"，让它从页面上看不见

然后在需要的按钮上添加点击事件，同时也要import对应代码

 <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();
}

个人主页：闲蛋

个人开发一个网站，精力有限，开源不易，不喜勿喷，目前持续完善更新中，欢迎大家来访，