前端学习:ElementUI upload组件,在弹出文件选择窗口之前做操作

项目场景

因为上传Excel会覆盖当前表格中的内容,所以需要给用户一个提示后 确认后才能进行上传Excel的流程;

问题描述

在准备上传文件的时候,点击按钮,文件选择框直接弹出,与我们所需要的操作不符,需要在弹出之前作出判断;

原因分析

ElementUI的上传组件似乎没有一个上传窗口弹出前的方法,所以before-upload并不能作用于此,选择文件的窗口还是会弹出来,因为这个问题是以前就解决过一次,在网上也看到过,所以大脑中有这个的解决办法;

解决方案

• 首先我们需要将template中的代码给替换掉;原来我们只是upload组件,这里我们重新多写一个按钮 并且定义一个参数将上传的按钮使用v-show隐藏掉

<el-button @click="isUpload" v-show="showUpload">上传按钮</el-button>
<el-upload :http-request="xxxx"  v-show="!showUpload">
   <el-button ref="uploadBtn">上传按钮</el-button> <!-- 这里只做展示的 但是得定义一个ref js中有用-->
</el-upload>

• 后面js中的isUpload事件就很好写了 上传事件xxxx这里就不在写了

isUpload(){
  if(dataList.length>0){
    this.$confirm("上传会覆盖数据,是否上传","温馨提示",{
      confirmButtonText:"确认",
      cancelButtonText:"取消",
      type:"warning"
    }).then(()=>{
      this.$refs.uploadBtn.click() //触发上传组件中的按钮点击事件
      return true
    }).catch(()=>{
      return false
    })
  }else{  //因为表格中并没有数据 所以不需要询问
    this.$refs.uploadBtn.click() //触发上传组件中的按钮点击事件
  }
}

结语

一条路走不通,换一条路吧,
我们可以用其他方式去实现相同的效果;