vue3中上传upload组件,在弹出文件选择窗口之前进行操作

思路是,除了上传按钮,再写一个按钮2,通过按钮2的点击事件,做操作,完成之后在调用上传按钮click

上传按钮写了一个ref   uploadbtn

在按钮2的click方法中获取是否可以上传的判断条件

可以上传通过refs的  uploadbtn.value.$el.click()   点击方法调用上传选择文件窗口

完整代码

<el-upload
              v-show="false"
              ref="uploadRef"
              :limit="1"
              accept=".pdf"
              :headers="upload.headers"
              :action="upload.url "
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :before-upload="sc"
              :auto-upload="true"
              :multiple="false"
              :show-file-list="false"
            >
              <el-button ref="uploadbtn" type="primary" plain icon="Plus" @click="handleUpload" v-hasPermi="['engineering:document:add']"
                >导入</el-button
              >
            </el-upload>
            <el-button type="primary" plain icon="Plus" @click="handleUpload" v-hasPermi="['engineering:document:add']">导入</el-button>

  const uploadbtn = ref<any>(null)
const handleUpload = async() => {
  //

if(true){
  // 可以上传,用ref调用点击事件
  uploadbtn.value.$el.click()
    }else{
      // 不可以给个提示
      proxy?.$modal.msgWarning('当前上传识别资源已存在五个,请稍后再试!');
    }
}