vue+elementui el-upload 图片类型，大小，尺寸限制

在Vue中使用Element UI的el-upload组件时，可以通过设置before-upload钩子函数来实现图片类型、大小和尺寸的限制。以下是一个简单的例子：

<template>
  <el-upload
    action="https://example.com/upload"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    beforeUpload(file) {
      const isTypeOk = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      const isSizeOk = isTypeOk && isLt2M;
 
      if (!isSizeOk) {
        this.$message.error('上传的图片只能是JPG/PNG/GIF格式且大小不能超过2MB!');
      }
 
      const isSizeOk = isTypeOk && isLt2M;
      if (isSizeOk) {
        // 创建一个Image对象来检查尺寸
        const img = new Image();
        img.onload = () => {
          const isLt1080 = img.height <= 1080 && img.width <= 1920;
          if (!isLt1080) {
            this.$message.error('上传的图片尺寸不能超过1080*1920!');
          }
          return isTypeOk && isLt2M && isLt1080;
        };
        img.onerror = () => {
          this.$message.error('上传的图片无法预览，请检查图片格式!');
          return false;
        };
        img.src = URL.createObjectURL(file);
      }
 
      return isSizeOk;
    },
  },
};
</script>

在这个例子中，beforeUpload方法检查了文件的类型、大小以及尺寸。如果文件不符合条件，会通过this.$message.error来显示错误信息，并返回false以阻止文件上传。如果文件通过了所有检查，则返回true允许上传。