先上效果图：

HTML代码：

<div class="grid-content bg-purple" style="text-align: center;">

                      <el-upload

                        action="https://jsonplaceholder.typicode.com/posts/"

                        list-type="picture-card"

                        :class="{hide:hideUpload}"

                        :on-preview="handlePictureCardPreview"

                        :on-remove="handleRemove"

                        :before-upload="beforeAvatarUpload"

                        :on-change="changeimg"

                        :limit="1"

                      >

                        <i class="el-icon-plus"></i>

                      </el-upload>

                      <el-dialog :visible.sync="dialogVisible">

                        <img width="100%" :src="dialogImageUrl" alt />

                      </el-dialog>

                      <div>

                        <span>上传头像</span>

                      </div>

                      <div>

                        <span>只支持JPG、PNG、大小不超过5M</span>

                      </div>

                    </div>

JS代码：

//图片上传

    handleRemove(file, fileList) {

      console.log(file, fileList);

      this.hideUpload = fileList.length >= this.limitCount;

    },

    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;

      this.dialogVisible = true;

    },

    changeimg(file, fileList) {

      this.hideUpload = fileList.length >= this.limitCount;

    },

    beforeAvatarUpload(file) {

      const isJPG = file.type === "image/jpeg";

      const isPNG = file.type === "image/png";

      const isLt2M = file.size / 1024 / 1024 < 5;

 

      if (!(isJPG || isPNG)) {

        this.$message.error("上传头像图片只能是 JPG 格式!");

      }

      if (!isLt2M) {

        this.$message.error("上传头像图片大小不能超过 5MB!");

      }

      return (isJPG || isPNG) && isLt2M;

    }

CSS部分

<style>

.hide .el-upload--picture-card {

  display: none;

}

</style>

limitCount是上传数量，我这里指定了1张，那么上传一张就隐藏了添加按钮，如果是需要上传2张之后再隐藏只需要改成2就OK了