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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我不知道你的
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; } }); }