【antd-Upload】支持预览功能的头像上传

 

import React, { useState, useEffect } from 'react';

　import { Row, Col, Form, Button, Upload } from 'antd';
　import { LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons';

function PictureUpload(props){
    const [imageUrl, setImageUrl] = useState('');
    const [oldLoginUrl, setOldLoginUrl] = useState('');

      const [fileList, setFileList] = useState('');

 　　// 获取登录页面 logo
    async function getSystemLoginLogoFn() {
        const res = await getSystemLoginLogo();
        setOldLoginUrl(formatUrl(res));
    }

    // 二进制流转base64
    function formatUrl(res) {
        const data =
            'data:image/png;base64,' +
            btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''));
        return data;
    }

 　　function getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    const beforeUpload = (file) => {
        //控制上传图片格式
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('您只能上传JPG/PNG 文件!');
            return;
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('图片大小必须小于2MB!');
            return;
        }
        getBase64(file, (imageUrl) => {
            setLoading(false);
            setImageUrl(imageUrl);
        });
        setFileList(file);
        return false;
    };

　　// 提交
　　function handleSubmit(){

　　　　　 const formData = new FormData();

         formData.append('file', fileList);

         await uploadLogoLogin(formData).then((res: ApiRes) => {

         if (res.code === 200) {

                message.success('上传成功');

                getSystemLoginLogoFn();

                setImageUrl('');

                setFileList('');

            } else {

                 message.error('上传失败');

            }

        });

　　}

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <CloudUploadOutlined style={{ fontSize: '36px', color: '#ccc' }} />}
            <div className="ant-upload-text" style={{ color: '#ccc' }}>
                点击上传
            </div>
        </div>
    );
　　return (
        <div className="app-container">
                <div className="logo-maintenance">
                       <Form form={systemForm}>
                              <Row gutter={14}>
                                        <Col span={6}>
                                            <Form.Item label="原logo" name="oldLoginUrl">
                                                <img
                                                    src={oldLoginUrl}
                                                    style={{ width: '120px', height: '120px' }}
                                                />
                                            </Form.Item>
                                        </Col>
                                        <Col>
                                            <Form.Item label="新logo" name="newLoginUrl" rules={[{ required: true }]}>
                                                <Upload
                                                    name="avatar"
                                                    listType="picture-card"
                                                    showUploadList={false}
                                                    beforeUpload={beforeUpload}>
                                                    {imageUrl ? (
                                                        <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                                                    ) : (
                                                        uploadButton
                                                    )}
                                                </Upload>
                                            </Form.Item>
                                        </Col>
                                </Row>
                                <Button onClick={handleSubmit}>提交</Button>
                        </Form>
               </div>
        </div>
　　　　)
}

export default PictureUpload;