element-plus 如何點選其它位置觸發檔案上傳

灬丶發表於2024-07-14

原文連結： 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/是我的一個自建的網站，，歡迎大家來踩，多多給些建議，開源不易

相關文章