upload的典型案例demo

import React, { useState } from 'react';

import { Upload, Button, message, List } from 'antd';

import { UploadOutlined } from '@ant-design/icons';

interface CustomFile {

    uid: string;

    name: string;

    status: 'done' | 'error' | 'uploading';

    url?: string;

}

const DemoUpload: React.FC = () => {

    const [fileList, setFileList] = useState<CustomFile[]>([]);

    // 校验文件

    const beforeUpload = (file: File) => {

        const isImage = file.type.startsWith('image/');

        if (!isImage) {

            message.error('只能上传图片文件!');

            return Upload.LIST_IGNORE;

        }

        return true;

    };

    // 自定义上传

    const customRequest = async (options: any) => {

        setFileList(prev => [

            ...prev,

            {

                uid: options.file.uid,

                name: options.file.name,

                status: 'uploading',

            },

        ]);

        // 模拟上传

        setTimeout(() => {

            setFileList(prev =>

                prev.map(file =>

                    file.uid === options.file.uid

                        ? {

                            ...file,

                            status: 'done',

                            url: URL.createObjectURL(options.file),

                        }

                        : file

                )

            );

            message.success(`${options.file.name} 上传成功`);

            options.onSuccess && options.onSuccess('ok');

        }, 1000);

    };

    // 移除文件

    const handleRemove = (file: CustomFile) => {

        setFileList(prev => prev.filter(f => f.uid !== file.uid));

    };

    return (

        <div>

            <Upload

                beforeUpload={beforeUpload}

                customRequest={customRequest}

                showUploadList={false}

                multiple

            >

                <Button icon={<UploadOutlined />}>上传图片</Button>

            </Upload>

            <List

                style={{ marginTop: 16 }}

                bordered

                dataSource={fileList}

                renderItem={item => (

                    <List.Item

                        actions={[

                            <a key="remove" onClick={() => handleRemove(item)}>

                                移除

                            </a>,

                        ]}

                    >

                        <span>

                            {item.name} - {item.status}

                        </span>

                        {item.url && (

                            <img

                                src={item.url}

                                alt={item.name}

                                style={{ width: 40, marginLeft: 8 }}

                            />

                        )}

                    </List.Item>

                )}

            />

        </div>

    );

};

export default DemoUpload;