zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    反汇编测试
    《Unix/Linux系统编程》第五章学习笔记
    Linux学习笔记
    团队作业三
    缓冲区溢出
    ch6信号学习笔记
    ch5(定时器和时钟)学习笔记
    团队作业(四)
    团队作业(三)
    ch4学习笔记
  • 原文地址:https://www.cnblogs.com/jiumengmeng/p/9543900.html
Copyright © 2011-2022 走看看