el-uploda超过限制图片隐藏，并封装组件

<template>
  <div>
    <el-upload
      :class="{ hide: hideUpload }"
      :action="BASE_API + address"
      :headers="header"
      :on-preview="onPreview"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :data="dataForm"
      :file-list="imgUrl"
      list-type="picture-card"
      multiple
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisibles" append-to-body>
      <img width="100%" :src="imgUrls" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "MyUploadStr",
  props: {
    address: {
      type: String,
      default: "",
    },
    rowPath: {
      type: String,
      default: "",
    },
    limit: {
      type: Number,
      default: 1,
    },
    getImg: {
      type: String,
      default: "",
    },
    ifScope: {
      type: Boolean,
      default: false,
    },
    dataForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dialogVisibles: false,
      hideUpload: false,
      BASE_API: process.env.VUE_APP_BASE_API,
      header: {
        stype: "user",
        token: getToken(),
      },

      imgUrls: "",
      imgUrl: [],
    };
  },
  mounted() {
    this.ifEdit();
  },
  methods: {
    onPreview(file) {
      console.log(file);
      console.log(file.url);
      this.imgUrls = file.url;
      this.dialogVisibles = true;
    },
    onSuccess(response, file, fileList) {
      if (response.code == 20000) {
        if (fileList.length >= this.limit) {
          this.hideUpload = true;
        }
        console.log(fileList.length);
        console.log(this.limit);
        this.$emit("onSuccess", response, file, fileList);  
      }
    },
    onRemove(file, fileList) {
      this.hideUpload = false;
      this.$emit("deleteImg", file);
    },
    ifEdit() {
      if (this.ifScope && this.rowPath != "") {
        this.imgUrl.push({
          url: this.rowPath,
        });
        if (this.rowPath.length >= this.limit) {
          this.hideUpload = true;
        }
      } else if (this.getImg != "") {
        console.log(this.getImg);
        this.imgUrl.push({
          url: this.getImg,
        });
        if (this.imgUrl.length >= this.limit) {
          this.hideUpload = true;
        }
      }
    },
   
  },
};
</script>

<style scoped>
/deep/.hide .el-upload--picture-card {
  display: none;
}
/deep/ .el-upload--picture-card{
    width: 120px;
    height: 120px;
}
/deep/ .el-upload{
    width: 120px;
    height: 120px;
    line-height: 120px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 120px;
    height: 120px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 120px;
    height: 120px;
    line-height: 120px;
}
/deep/ .avatar{
    width: 120px;
    height: 120px;
}
</style>