react图片上传，image.onload异步时图片上传闪烁的问题2

相对于上一个版本 这个版本我是用了async和await的方法替换掉了promise的操作，代码看着相对简洁一点

import React,{Component} from 'react';
import {connect} from 'react-redux';
import { Upload, Icon, message } from 'antd';
class Pay extends Component{
    constructor(){
        super();
        this.state = {loading: false}
    }
    getBase64=(img, callback)=>{
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };
    beforeUpload=async (file)=>{ // 用了async await 回避了image.onload的异步问题 
        let imgUrl = '';
        await this.getBase64(file, imageUrl => {
                imgUrl=imageUrl;
                if(imgUrl) {
                    var image = new Image();
                    image.onload = () => {
                        var width = image.width;
                        var height = image.height;
                        //var fileSize = image.fileSize;
                        let a = ((9 / 16).toFixed(2));/*控制文件宽高比例*/
                        let b = ((16 / 9).toFixed(2));
                        let c = (width / height).toFixed(2);
                        if ((c !== a) && (c !== b)) {
                            message.error("图片宽高比例错误");
                            this.setState({imageUrl: null,loading: false });
                        }else{
                            this.setState({imageUrl: imgUrl,loading: false });
                        }
                    };
                    image.src = imgUrl;
                }
            });
        let isLt50M = file.size / 1024 / 1024 < 50;/*控制文件大小*/
        if (!isLt50M) {
            message.error('文件大小因小于50MB!');
            this.setState({imageUrl: null,loading: false });
        }
    };
    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => {
                this.setState({
                    loading: false,
                });
            });
        }
    };
    render(){
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const {imageUrl} = this.state;
        return (
            <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="//jsonplaceholder.typicode.com/posts/"
                beforeUpload={this.beforeUpload}
                onChange={this.handleChange}
                accept=".png" /*控制文件格式*/
            >
                {
                    imageUrl?<div className="imgBox"><img src={imageUrl} alt="avatar" className="ant-upload"/></div>:uploadButton
                }
            </Upload>
        );
    }
}
export default connect(null,null)(Pay);