elementUI中upload上传组件点击上传按钮，选择文件框弹出前进行提示点击确定则继续弹框选择文件上传

上传组件点击按钮后会直接弹出选择文件框，那么在这中间文件框弹出之前想要进行提示或者进行其他操作怎么办呢

其实实现起来很简单，既然el-upload中的button按钮点击会直接弹出文件选择框，那么我将按钮放在外面模拟上传按钮，提示或操作完成后再触发上传，弹出文件选择框继续上传即可。

点击按钮，若没有选择需求，则会弹出确认框

我的需求是上传之前需要有个下拉选需要勾选，如果没有勾选，或先弹出一个确认提醒框提示回去选择还是继续上传。上代码

template

<el-upload
  class="upload-demo"
  :action="url"
  ref="upload"
  :show-file-list="false"
  accept=".xlsx,.xls"
  :before-upload="beforeUploadFile"
  :on-success="uploadSuccess"
  :data="upLoadText"
 />
<el-button type="primary" @click="upLoadFile">xls格式</el-button>
<span>请首先下载xls格式的导入模板导入</span>

这里把上传按钮放在上传组件外面，其实不属于上传组件了。upload组件内不再需要按钮

methods

upLoadFile() {
	  // 判断是否选择了需求，若没有选则提示
      if (this.selectedRequirement) {
        // 若已经选择了需求，直接选择文件上传
        this.toSelectFile()
      } else {
        // 若未选择需求，则提示选择
        this.$confirm(
          '您未选择关联需求，请确认！如无需关联请点击确定继续',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '去选需求',
            type: 'warning'
          }
        )
          .then(() => {
            this.toSelectFile()
          })
          .catch((error) => error)
      }
},
// toSelectFile方法可以是自己需要做的操作，然后继续选择文件上传
toSelectFile() {
      this.upLoadText = {
        creator: window.sessionStorage.getItem('accountName')
        fileName: this.fileName,
        requirement: this.selectedRequirement      
      }
      // 触发upload组件内部点击事件，弹出文件选择框
      this.$refs['upload'].$refs['upload-inner'].handleClick()
},

通过ref逐层触发组件内按钮的handleClick事件，注意区分[‘upload-inner’] 是 upload组件内部的ref