javascript - 欧芹图像尺寸验证

Question

我有一个文件输入字段，我想验证最小图像尺寸(除其他外)。我使用 Parsley 作为我的前端验证库，所以我尝试添加 custom validator去做这个。

这是我的自定义验证器代码:

window.Parsley.addValidator('imagemindimensions', {
    requirementType: 'string',
    validateString: function (value, requirement, parsleyInstance) {

        let file = parsleyInstance.$element[0].files[0];
        let [width, height] = requirement.split('x');

        let image = new Image();

        image.src = window.URL.createObjectURL(file);
        image.onload = function() {
            return image.width >= width && image.height >= height;
        };
    },
    messages: {
        en: 'Image dimensions have to be at least  %s px'
    }
});

我的 HTML:

<input type="file"
       name="upload-photo"
       accept="image/*"
       class="js-photo-upload"
       data-parsley-validate
       data-parsley-trigger="change"
       data-parsley-imagemindimensions="300x300">

处理文件输入变化的JS代码:

$(document).on('change', '.js-photo-upload', function() {
    if ($(this).parsley().isValid()) {
        // process image
    }
});

现在运行我的验证器时，它总是通过。我怀疑这是因为Parsley无法处理image.onload中的异步代码块。关于如何在 Parsley 库中解决这个问题有什么想法吗？

到目前为止我找到的解决方案是:

• 使用自定义 remote validator ，并让后端负责它的。但这会导致轻微的延迟，并导致服务器出现某些问题可以先在客户端完成。
• 在更改事件监听器上检查我的文件输入中的尺寸，并使用 addError 方法手动添加 Parsley 错误。但这有点麻烦，需要我手动删除错误下次验证该字段时也是如此。

Answer 1

validateString 需要返回一个 Promise。 onload 应该完成或拒绝它，而不是返回 true/false