el-upload自定义触发按钮及触发上传前判断

辰漪
2022-03-11 / 3 评论 / 826 阅读 / 正在检测是否收录...

1. 在页面中引用el-upload组件

<!-- 自定义按钮div -->
  
<div 
  v-if="routerList.length !== 1"
  class="action upload" 
  :class="{action_upload_radius: routerList.length === 1}"
  @click="uploadHandler"
>
  <i class="el-icon el-icon-upload"></i>上传
</div>
    
<!-- hidden upload -->
    
<el-upload
  v-show="false"
  class="upload-demo"
  :action="uploadUrl"
  :on-success="actionUploadSucc"
  :show-file-list="false"
  :headers="headers"
  :data="actUploadParams"
  :multiple="false"
  :file-list="fileList">
  <el-button ref="file-home-uploadBtnRef" v-show="false">
    <i class="el-icon-upload"></i>上传文件
  </el-button>
</el-upload>

使用一个div模拟一个上传按钮,使用v-show隐藏upload组件,在upload组件的触发按钮el-button上绑定ref

2. 触发前条件判断及触发upload上传方式

    // action bar 上传btn
    uploadHandler () {
      console.log(this.routerList);
      const len = this.routerList.length
      if(this.routerList.length === 1) return this.$message.info('请先进入文件夹!')
      const currFolderId = this.routerList[len-1].folderId // 当前操作的文件夹id
      this.actUploadParams.folderId = currFolderId
      // 触发upload组件上传
      this.$refs['file-home-uploadBtnRef'].$el.click()
    },

获取到upload触发按钮el-button的ref,在获取到ref上的$el,调用click()自点击触发upload上传

3
选择打赏方式:
微信

评论 (3)

取消
  1. 头像
    kfnnhwobii
    Windows 10 · Google Chrome

    不错不错,我喜欢看

    回复
  2. 头像
    etjkfwpenf
    Windows 10 · Google Chrome

    博主真是太厉害了!!!

    回复
  3. 头像
    aa
    Windows 10 · Google Chrome

    123123

    回复