能否用Vuetify规则验证图片宽高？自定义验证函数报错求助

问题根源 #

你的验证逻辑存在异步操作处理错误：自定义的File函数（建议改名避免和原生API冲突）里的FileReader.readAsDataURL、img.onload都是异步操作，但函数直接同步返回false，导致Vuetify的验证规则始终接收到false，触发错误提示。

另外，Vuetify的表单验证规则支持返回Promise来处理异步验证逻辑，这才是正确的处理方式。

修复后的代码实现 #

1. 重构验证函数 #

替换原有的导出函数，改成异步验证逻辑：

// 替换原有的minResolution函数
export function minResolution(width, height, errorMsg) {
  return async (file) => {
    if (!file) return true; // 无文件时验证通过（可根据需求调整）
    
    try {
      const { imgWidth, imgHeight } = await getImageDimensions(file);
      return imgWidth >= width && imgHeight >= height || errorMsg;
    } catch (err) {
      return errorMsg; // 加载图片失败时返回错误信息
    }
  };
}

// 提取异步获取图片宽高的工具函数
async function getImageDimensions(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    reader.onload = (evt) => {
      const img = new Image();
      img.onload = () => {
        resolve({ imgWidth: img.width, imgHeight: img.height });
      };
      img.onerror = reject;
      img.src = evt.target.result;
    };
    
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

2. 组件中使用规则 #

在Vue组件内按如下方式定义验证规则：

// 组件内的rules定义
data() {
  return {
    rules: {
      minResolution: minResolution(800, 600, '图片分辨率需不低于800x600')
    }
  };
}

3. 注意事项 #

• 避免使用和原生API重名的函数（比如原代码的File），防止意外冲突。
• 异步验证时，Vuetify会自动处理加载状态，无需额外手动控制。
• 若需要必填校验，需单独添加必填规则，和分辨率规则配合使用。

内容的提问来源于stack exchange，提问作者Mai Trung Kiến