使用Element控件模仿按钮的点击事件

问题：在点击上传文件后，由于限制了只能上传一个文件，当再次上传文件时提示用户会先删除文件。 我们要做的工作是模仿按钮的点击，再次帮用户调用打开上传文件的动作

控件如下

 <el-upload
                    style="margin-left: 35px"
                    drag
                    action="#"
                    :file-list="fileList"
                    :auto-upload="false"
                    :on-exceed="handleExceed"
                    :limit="1"
                    :on-remove="removeFile"
                    :on-error="uploadError"
                    :on-change="uploadChange"
                    :before-remove="beforeRemove"
                    accept=".xls, .xlsx"
                  >
                    <img width="66px" height="53px" src="@/assets/img/mark/upload.png" />
                    <div style="margin-top:20px;margin-bottom: 20px"><span style="color: #999999;font-size: 14px;">点击或将文件（xsl、xslx）,拖拽到这里上传</span></div>
                    <div><el-button ref="uploadBtn" size="small" type="primary">点击上传</el-button></div>

                  </el-upload>

为按钮定义了 ref="uploadBtn"

当超出文件限制数时，在handleExceed方法中处理

 handleExceed(file, fileList) {
        this.$confirm(`附件限定为单个文件，继续上传会先删除已添加的文件`).then(()=>{
          fileList.splice(-1,1); //删除以前的旧文件
          this.$refs.uploadBtn.$el.click();
        });
      },

关键代码是

this.$refs.uploadBtn.$el.click();

通过refs找到按钮，并通过$el调用点击事件，这样按钮的点击事件就调用了。