react项目里antd上传图片的组件upload

当需求有上传完图片且保存到草稿里时，不仅需要调接口上传图片，而且在重新进入页面时，也要预览效果。
函数组件也好、类组件也好，使用逻辑都一样,下面对着antd的示例详细解析

import React from 'react';
import {Upload, Modal} from 'antd';
import {PlusOutlined} from '@ant-design/icons';

// 这里时图片格式得转换，具体看需要那种格式，返回promise
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);
    });
}

class demo extends React.Component {
    state = {
    	// 预览开关
        previewVisible: true,
        // 预览图
        previewImage: '',
        // 预览标题
        previewTitle: '',
        // 图片信息
        fileList: [
            {
        	uid: '-xxx',
        	// 文件上传的动画，进度条
        	percent: 50,
        	name: 'image.png',
        	// 上传得一个状态
        	status: 'uploading',
        	url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      		},
        ]
    };

    handleCancel = () => this.setState({previewVisible: false});

    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        this.setState({
        	// 设置预览出现的条件
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
        });
    };

    handleChange = ({fileList}) => {
        this.setState({fileList});
    };

    render() {
        const {previewVisible, previewImage, fileList, previewTitle} = this.state;
        const uploadButton = (
            <div>
                <PlusOutlined />
                <div style={{marginTop: 8}}>Upload</div>
            </div>
        );
        return (
            <div>
                <Upload
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="picture-card"
                    // 已经上传的文件列表
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                >
                	// 如若有了一张图片了，上传图片的按钮会隐藏掉
                    {fileList.length >= 1 ? null : uploadButton}
          
                </Upload>
                <Modal
                    visible={previewVisible}
                    title={previewTitle}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <img alt="example" style={{width: '100%'}} src={previewImage} />
                </Modal>
            </div>
        );
    }
}

export default demo;

form里使用form.item时，可以设置自定义校验validator

export const sizeCheck = (rule, value, callback) => {
    let size = value.file.originFile.size;
    if (size > 5 * 1024 * 1024) {
        callback('图片大小不符合，请重新上传');
    }
    return new Promise((resolve, rej) => {
        let img = new Image();
        img.src = value.file.thumbUrl;
        img.onload = function () {
            let size = [img.width, img.height];
            if (size[0] >= 120 && size[1] >= 120 && size[0] !== size[1]) {
                callback('尺寸大小不符合，请重新上传');
                rej();
                return;
            }
            callback();
            resolve();
        };
    });
};

Let yourself gradually excellent