element 上传图片

需求：

上传图片只上传一张，当图片上传完成之后，就隐藏上传按钮，当图片移除之后就显示上传按钮

//这里使用的是v-if判断让图片和按钮动态显示
 <el-upload v-if="fileThemeImg.length == 0" :action="GLOBAL.BASE_URL + '/sysoss/upload'"
                      :class="{ uoloadSty: showBtnDealImg, disUoloadSty: noneBtnUrl }" :limit="1" :data="savePath" list-type="picture-card" :headers="headerObj"
                      :on-preview="handlePictureCardPreview" :before-upload="beforeUploadImg" :on-success="handleSuccessthemeImg" :on-error="handleError"
                       :on-change="imgUrlChange" :file-list="fileThemeImg">
                      <i class="el-icon-plus"></i>
                    </el-upload>

 <el-upload v-else :action="GLOBAL.BASE_URL + '/sysoss/upload'" :class="{ hide: hideUpload }" :limit="1" :data="savePath"
                      list-type="picture-card" :headers="headerObj" :on-preview="handlePictureCardPreview" :before-upload="beforeUploadImg"
                      :on-remove="handleRemovethemeImg" :on-success="handleSuccessthemeImg" :on-error="handleError" :on-change="imgUrlChange2"
                      :file-list="fileThemeImg">
                      <i class="el-icon-plus"></i>
                    </el-upload>



/* 上传按钮隐藏 */
.disUoloadSty .el-upload--picture-card {
  display: none;
}
.hide .el-upload--picture-card {
  display: none;
}

:data是指上传时候的名称 savePath: { pathName: ‘theme_img’ },
：file-list指的是上传图片的url 数组类型 文档上都有标注

通过触发上传图片的方法

//判断当前上传数组的长度是否大于或者等于我们规定好的上传图片数量进行判断
 imgUrlChange (file, fileList) {
      this.noneBtnUrl = fileList.length >= this.limitCountUrl;
    },
    //这个方法只是用来判断用户上传图片的格式
 beforeUploadImg (file) {
      const isImg = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error('上传图片格式不对哦');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return isImg && isLt2M;
    },