ant design Upload组件 踩的坑

根据项目需求，可能要上传多张照片，所以我选择了 ant Upload 组件中 照片墙 部分 的代码块。
这里用到了上传成功后的预览、删除

只要用到的方法
onChange 上传中、完成、失败都会调用这个函数。
onPreview 预览

斜体样式在项目中我遇到的问题是以上在上传中，点击确定，图片才显示；
斜体样式说明图片我上传成功了，我只是没有对图片上传成功后做处理；
所以这里我用了 status === ‘done’ 来做判断，loading 改变

//转base64`
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
//上传之前 只限图片
function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isJpgOrPng) {
      message.error('你只能上传 JPG/PNG/GIF 的文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  }

	 constructor(props) {
	        super(props);
	        this.state = {
	            previewVisible: false,
	            previewImage: '', //预览
	            fileList: [], //上传文件列表
	            baseimg: '',
	            loading: false,  //上传 loading
	        }
   }
	render() {
		 const {   handlePreview, previewVisible, previewImage, fileList,
	            handleChange, handleCancelPic,  }, 
	        } = this.props;
	        //上传按钮
	        const uploadButton = (
	            <div>
	                <Icon type="plus" />
	                <div className="ant-upload-text">Upload</div>
	            </div>
	        );
		return (
		<div>
                <Upload
                     action="www.baidu.com"
                     listType="picture-card"
                     fileList={fileList}
                     onPreview={handlePreview}
                     onChange={handleChange}
                 >
                     {fileList.length >= 1 ? null : uploadButton}
                 </Upload>             
                 <Modal visible={previewVisible} footer={null} onCancel={handleCancelPic}>
                     <img alt="故障图片" style={{ width: '100%' }} src={previewImage} />
                 </Modal>
             </div>
		)
	}
  //上传 取消
    handleCancelPic = () => this.setState({ previewVisible: false });
    //上传 预览
    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        this.setState({
            previewImage: file.thumbUrl || file.preview,
            previewVisible: true,
        });
    };
   //上传 onChange 
   /*  onChange  参数  file 中有上传的状态  status
   */
    handleChange = ({ file, fileList, event }) => {
        if(file.type.indexOf("image") == -1){ //是否包含 image
            return;
        }else {
            if (file.status === "uploading") {
                this.setState({ loading: true });
            }
            if (file.status === "done") {
    
                getBase64(file.originFileObj) 
    
                this.setState({
                    loading: false,
                    baseimg: fileList[0].thumbUrl
                });
        
            }
            if (event == undefined) {
                this.setState({
                    fileList,
                });
            } else {
                this.setState({
                    fileList,
                    baseimg: fileList[0].thumbUrl
                });
            }
        }
    }

最终效果