Adakah mungkin untuk menggunakan peraturan vuetify untuk mengesahkan lebar, ketinggian imej?

Question

Saya ingin mengesahkan lebar dan ketinggian imej menggunakan vuetify. Saya menulis fungsi untuk menyemak imej dan membandingkannya dengan syarat. Walaupun saya boleh menyemak lebar, ketinggian imej, peraturan sentiasa salah

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

Ini ialah fungsi eksport

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

Maaf Bahasa Inggeris saya teruk sangat

Answer 1

Saya tidak tahu sama ada minResolution anda boleh menjadi tak segerak, tetapi ini adalah satu-satunya cara, dengan pengesahan tak segerak

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