Question

我遇到的问题是我有一个验证表单的函数，必须返回错误数组。在该函数中，我需要验证图像（来自url）是否有效{width，height}。我正在使用onLoad函数来检查，但这是异步。

check(url: string, requiredDimension: ?Object) {
    // $FlowFixMe
    return new Promise((resolve: Function, reject: Function) => {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            let img = new Image();
            img.onload = () => {
                if (!requiredDimension || (requiredDimension.width === img.width && requiredDimension.height === img.height)) {
                    resolve({valid: true, message: 'Field is valid!'});
                } else {
                    resolve({
                        valid: false,
                        message: `Image not valid! Required dimensions are ${requiredDimension.width}x${requiredDimension.height}!`
                    });
                }
            };
            img.src = url;
        } else {
            if (requiredDimension) {
                resolve({
                    valid: false,
                    message: `Image not valid! Required dimensions are ${requiredDimension.width}x${requiredDimension.height}!`
                });
            } else {
                resolve({
                    valid: false,
                    message: `Image not valid!`
                });
            }
        }
    });
}

function validate(formData, errors) {
   Object.keys(formData).forEach((item) => {
       let response = check(formData[item], requiredDimensions)
       if(!response.valid) {
           //add errors
       }
   });
return errors;
}

总结一下。我需要一种同步方式来检测照片的有效尺寸。函数检查工作正常，但函数验证需要响应。

Answer 1

从编辑代码开始，看起来在末尾附近有一个额外的大括号，可以将错误排除在范围之外。在函数validate中，您尝试添加（我假设的）一个名为（errors）的错误数组，但是由于额外的大括号，您永远不会返回它。

在JavaScript / React中同步加载图像

1 个答案: