我想使用 vuetify 验证图像宽度和高度。我编写了一个函数来检查图像并与条件进行比较。虽然我可以检查图像的宽度、高度，但规则总是错误
<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>
这是导出功能
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;
}
抱歉我的英语太差了
我不知道你的
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; } }); }