elementui上传图片，到达最大数量隐藏上传按钮，判断文件格式是不是png jpg，文件最大5m

在Element UI中，要实现上传组件的功能，你可以使用el-upload组件。以下是实现你所需功能的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :before-upload="beforeUpload"
    :limit="3"
    accept=".png,.jpg"
    list-type="text">
    <el-button size="small" type="primary" v-show="showButton">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传png/jpg文件，且不超过500KB</div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      showButton: true
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 当文件列表发生变化时调用
      if (fileList.length >= this.limit) {
        this.showButton = false;
      }
    },
    handleExceed(files, fileList) {
      // 当超出最大上传数量时调用
      this.$message.warning(`最多只能上传 ${this.limit} 个文件！`);
    },
    beforeUpload(file) {
      const isPNGorJPG = file.type === 'image/png' || file.type === 'image/jpeg';
      const isLt500KB = file.size / 1024 / 1024 < 0.5;
 
      if (!isPNGorJPG) {
        this.$message.error('上传头像图片只能是 PNG/JPG 格式!');
      }
      if (!isLt500KB) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isPNGorJPG && isLt500KB;
    }
  }
};
</script>

在这个例子中，我们定义了el-upload组件的几个关键属性：

• action：上传的服务器地址，这里使用了一个假的API地址。
• on-change：文件列表发生变化时的钩子，用于更新上传按钮的显示状态。
• on-exceed：当超出文件上传数量限制时的钩子。
• before-upload：上传文件之前的钩子，用于检查文件格式和大小。
• limit：最大上传文件数量。
• accept：允许上传的文件格式。
• list-type：文件列表的类型。

handleChange方法用于监听文件列表的变化，如果文件数量达到限制（3个），则隐藏上传按钮。handleExceed方法用于处理超出文件限制时的情况。beforeUpload方法在文件上传前进行格式和大小的校验，返回false将阻止文件上传。