elementUI只显示单张图片

记录上传图片后不会显示第二个上传框

由上面图片变成

   <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="true"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                 :limit="1"
               :class="{ disabled:uploadDisabled }"
            >

首先在upload组件里面加一个

:class="{ disabled:uploadDisabled }"

用于在长传图片后把上传框消失

然后再css里面加入方法

        .disabled .el-upload--picture-card {
             display: none;
          }
  

最后添加钩子函数

      computed: {
                uploadDisabled() {
                console.log(this.fileList.length)
                  return this.fileList.length > 0   //判断图片上传的数量动态控制按钮隐藏与显示
                },
},

fileList换成自己放图片的变量