是否可以使用 vuetify 规则验证图像宽度、高度？

Question

我想使用 vuetify 验证图像宽度和高度。我编写了一个函数来检查图像并与条件进行比较。虽然我可以检查图像的宽度、高度，但规则总是错误

<v-file-input 
                            :id="'file-input-' + label"
                            ref="fileInput"
                            :rules="rules.minResolution"
                            class="file-input-upload pt-0 pb-2"
                            prepend-icon=""
                            :error-messages="errorMessages"
                            @change="onChange"
                        >
                            <template #message="{ message }">
                                {{ showMessages($t(message), $t(label), maxSize) }}
                            </template>
                            <template v-if="imageError !== ''">
                                {{ $t(imageError) }}
                            </template>
                        </v-file-input>

这是导出功能

export function minResolution(width, height, error) {
  return file => ( file && (new File(file, width, height) === true)) || error
}

function File(file, width , height) {
  const reader = new FileReader() 
  reader.readAsDataURL(file);
  reader.onload = evt => {
    const img = new Image();
    img.onload = () => {
      if (img.width >= width && img.height >= height) {
        alert(1)
        return true;
      }
    }
    img.src = evt.target.result;
  }
  return false;
}

抱歉我的英语太差了

Answer 1

我不知道你的minResolution是否可以是异步的，但这是唯一的方法，带有异步验证

export async function minResolution(width, height, error) {
  return file => ( file && (await check_image_dimensions(file, width, height) === true)) || error
}

function check_image_dimensions(file, width , height) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return new Promise(resolve => {
    reader.onload = evt => {
      const img = new Image();
      img.onload = () => {
        resolve(img.width >= width && img.height >= height);
      }
      img.src = evt.target.result;
    }
  });
}