在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停止上传并给出错误信息。