Est-il possible d'utiliser les règles vuetify pour valider la largeur et la hauteur de l'image ?

Question

Je souhaite valider la largeur et la hauteur de l'image à l'aide de vuetify. J'ai écrit une fonction pour vérifier l'image et la comparer avec une condition. Bien que je puisse vérifier la largeur, la hauteur de l'image, les règles sont toujours fausses

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

C'est la fonction d'exportation

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

Désolé, mon anglais est si mauvais

Answer 1

Je ne sais pas si votre minResolution peut être asynchrone, mais c'est le seul moyen, avec validation asynchrone

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