在 JavaScript/React 中同步加载图像答案

【问题标题】：Synchronous loading of images in JavaScript/React在 JavaScript/React 中同步加载图像
【发布时间】：2018-03-18 19:37:46
【问题描述】：

我遇到的问题是我有一个验证表单的函数，并且必须返回错误数组。在该函数中，我需要验证图像（来自 url）是否有效{宽度，高度}。我正在使用 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;
}

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

【问题讨论】：

您能否更具体地为我们确定您的问题？你刚刚给了我们一个想要的函数和一些代码，我们不知道该看什么。
@iHowell 当然。我已经编辑了我的代码

标签： javascript reactjs asynchronous async-await

【解决方案1】：

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

【讨论】：