el-upload上传图片只显示一张图片，隐藏多余按钮的

在项目中有需求只展示一个上传的图片，我看了element官网，发现并没有属性控制照片墙按钮的显示和隐藏，于是就想到了通过css样式来控制显示和隐藏

这个是没实现之前的样子：

这个是实现后的样子：

老规矩，话不多说，直接上代码

组件部分的代码：

<el-upload
  class="upload-demo"
  :class="hideUpload?'hide':''"
  ref="uploadForm1"
  :action="upload.url"
  :headers="upload.headers"
  :on-success="handleSuccess"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-change="handleImgChange"
  list-type="picture-card"
  accept=".png,.jpg"
  :file-list="fileList"
  :limit="1"
>
    <el-icon><Plus /></el-icon>
</el-upload>
//预览框
<el-dialog v-model="imgVisible">
     <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

变量部分：

      imgVisible:false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部（此处是我项目的设置，请根据自己项目情况进行设置）
        headers: {
          'Blade-Auth': "Bearer " + getToken(),
          'Authentication': `Basic ${Base64.encode(
                              `${website.clientId}:${website.clientSecret}`
                            )}`,
          'blade-requested-with':'BladeHttpRequest'
        },
        // 上传的地址
        url:"/api/blade-resource/oss/endpoint/put-file"
      },
      fileName:undefined,
      fileList:[],
      //控制按钮隐藏
      hideUpload:false

js方法部分：

 // 上传文件显示列表删除
    handleRemove(file, fileList){
      //控制多余按钮显示
      this.hideUpload = false
      //图片列表清空
      this.fileList = []
    },
    handleImgChange (file, fileList) {
      //控制多余按钮隐藏
      this.hideUpload = true 
    },
    //预览
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.imgVisible = true;
    },

css部分：

.hide ::v-deep .el-upload--picture-card {
    display: none;
  }