elementUI el-upload 上传图片前获取图片宽高并对图片的宽高做校验

在Element UI的el-upload组件中，可以使用before-upload钩子函数来获取图片的宽高并进行验证。以下是一个简单的示例代码：

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    beforeUpload(file) {
      // 创建一个FileReader对象
      const reader = new FileReader();
 
      reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
          // 获取图片宽度和高度
          const width = img.width;
          const height = img.height;
 
          // 在这里可以添加你的宽高验证逻辑
          // 例如：验证图片宽度和高度是否符合要求
          if (width >= 100 && height >= 100) {
            // 如果验证通过，可以返回true继续上传
            console.log(`图片宽度: ${width}, 高度: ${height}`);
            return true;
          } else {
            this.$message.error('图片宽度或高度小于100px，上传失败！');
            return false;
          }
        };
        img.src = e.target.result;
      };
 
      // 读取文件内容
      reader.readAsDataURL(file);
 
      // 返回false停止钩子函数执行，即不自动上传
      return false;
    },
  },
};
</script>

在这个示例中，beforeUpload方法通过FileReader读取选中的图片文件，然后创建一个Image对象来加载文件内容。加载完成后获取图片的宽度和高度，并可以在这里添加自定义的宽高验证逻辑。如果验证通过，则返回true允许继续上传；如果验证失败，则返回false停止上传并给出错误信息。