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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya tidak tahu sama ada
minResolutionanda boleh menjadi tak segerak, tetapi ini adalah satu-satunya cara, dengan pengesahan tak segerakexport 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; } }); }