ant-design 上传图片组件验证bug Promise

场景: 上传图片前需要验证尺寸大小等,还要获取服务器的签名信息,肯定是在beforeUpload中写的,beforeUpload要求返回一个promise,开始我验证写了一个 promise,请求签名写了一个promise,请求签名放在检验promise的then方法里面,想要达到检查通过请求签名的效果,结果没实现;我又拿promise.all来尝试,还是不可以,总是在验证 promise执行后就不管后面的了

解决方法: 将签名的promise放在验证promise的resolve里面,让签名的promise结果决定验证promise的结果。

部分代码:

    beforeUpload = (file, fileList) => {
        const { size, xSize, ySize, picFormat } = this.props;
        return new Promise((resolve, reject) => {
            const isJPG = picFormat && picFormat.length && (picFormat.indexOf(file.type) > 0);
            if (!isJPG) {
                message.error('图片上传失败,请检查图片格式!');
                reject();
            }
            const isLt2M = size && file.size / 1024 / 1024 < size;
            if (!isLt2M) {
                message.error('图片上传失败,请检查图片大小');
                reject();
            }

            (xSize || ySize) ? this.getBase64(file, (imageUrl) => {
                let image = new Image();
                image.src = imageUrl;
                image.onload = () => {
                    if (xSize && image.naturalWidth != xSize) {
                        message.error('图片上传失败,请检查图片宽度');
                        reject();
                    } else if (ySize && image.naturalHeight != ySize) {
                        message.error('图片上传失败,请检查图片高度');
                        reject();
                    } else {
                        resolve(this.getSign(file, fileList)); // this.getSign返回的是一个异步请求签名的promise
                    }
                };
            }) : resolve(this.getSign(file, fileList));
        });
    } 

Promise回顾

1、promise定义后会立即执行,所以一般都会把promise作为一个函数的返回值,在需要发起异步操作的地方调用函数。

2、promise有resolve和reject两个函数来决定操作成功和失败时分别进行什么操作。

3、resolve可以接受一个promise,来让这个参数promise决定该promise的结果,当两个

4、catch是then(null, rejection) 的别名,而且,promise中的错误有冒泡行为,如果链式调用,最后一个catch可以捕获前几个promise对象里发生的错误

5、promise里如果有错误代码,不会终止代码的执行,后面的代码照旧执行

6、Promise.all()方法中,如果其中一个promise自己定义了catch方法,发生错误时会优先执行自己的catch方法,如果定义了自己的then方法,则会执行完then方法之后将最后的结果返回

7、Promise.resolve方法可以将现有对象转为 Promise 对象,如果参数是promise,会原封不动返回,如果是then方法的对象,会将这个对象转为promise对象,然后立即执行then方法。如果是空的或非对象,就会返回一个结果为resolved状态的promise

原文地址:https://www.cnblogs.com/jiumengmeng/p/9543900.html