element-ui upload组件，隐藏上传按钮

上传前

image.png

上传后，隐藏上传按钮

image.png

html

<el-upload
  :class="[hideUploadEdit ? '' : 'hidden-btn']"  {{--控制上传按钮--}}
  class="flex-sc"
  action=""
  :on-success="uploadBannerVideoSuccess"
  :before-upload="beforeBannerVideoUpload"
  :file-list="formVideoList"
  :show-file-list="isShowVideo"
  :limit="1"
  list-type="picture-card">
    <div class="flex-cc" style="height: 100%">
      <i class="el-icon-plus"></i>
    </div>
    <div slot="file" slot-scope="{file}">
      <video  :src="file.url" class="banner-size el-upload-list__item-thumbnail" webkit-playsinline="" playsinline="" 
        x5-playsinline="" x-webkit-airplay="allow" autoplay loop muted></video>
      <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-delete" @click="removeVideo(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>

js

data: function () {
  return {
    hideUploadEdit: true,
  }
},

beforeBannerVideoUpload(file){
  let typeList = ['video/mp4'];
  let isMp4 = typeList.includes(file.type);
  if(!isMp4){
    this.$message.error('上传视频只能是mp4格式!');
    return false;
  }
  let isLimit = file.size / 1024 / 1024 < 10;

  if (!isLimit) {
    this.$message.error('上传视频大小不能超过10MB!');
    return false;
  }

  return true;
},

//上传成功后，隐藏上传按钮
uploadBannerVideoSuccess(res,file, fileList){
  let fileUrl = URL.createObjectURL(file.raw);

  let audioElement = new Audio(fileUrl);
  audioElement.onloadedmetadata = () => {
    let duration = parseInt(audioElement.duration); //视频时长为秒
    if(duration <= 30){
      fileList.splice(0, 1);
      this.formVideoList.push({
        url: fileUrl,
      })
      this.isShowVideo = true;
      this.hideUploadEdit = false;  //上传成功后，隐藏上传按钮
    }else{
      this.$message.error('上传视频长度建议30秒以内!');
      fileList.splice(0, 1);
    }
  }
},

//删除视频
removeVideo(file){
  this.formVideoList.splice(0,1);
  this.isShowVideo = false;
  this.hideUploadEdit = true;
},

css

<style>

  .hidden-btn .el-upload--picture-card{
    display: none !important;
  }

</style>