Ist es möglich, Vuetify-Regeln zur Validierung der Bildbreite und -höhe zu verwenden?

Question

Ich möchte die Bildbreite und -höhe mit vuetify validieren. Ich habe eine Funktion geschrieben, um das Bild zu überprüfen und mit einer Bedingung zu vergleichen. Obwohl ich die Breite und Höhe des Bildes überprüfen kann, sind die Regeln immer falsch

<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>

Dies ist die Exportfunktion

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;
}

Tut mir leid, dass mein Englisch so schlecht ist

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;
    }
  });
}