文件上传组件(FileUpload）

index1.tsx

import React, {useEffect, useState} from 'react';
import {Button, message, Space, Upload} from 'antd';
import {DraggerProps} from 'antd/lib/upload';
import {UploadOutlined} from '@ant-design/icons';
import {getToken} from '@/utils';
import {getUUID} from '@/utils/uuid';

interface uploadProps extends Partial<DraggerProps> {
    action: any;
    onDrop: any;
    headers: any;
}
interface props {
    // 上传接口
    action: string;
    // 获取上传后的fillpath
    uploadChange?: (path: string) => void;
    // 上传的格式提示
    extra?: string;
    // 上传按钮的文案
    uploadText?: string;
    // 支持的文件格式
    accept?: string;
    // 文件反显
    detail?: any;
    // 置灰
    disabled?: boolean;
    // 支持的文件类型， 用于beforeUpload校验
    fileType: string[];
    // 限制文件大小，单位Mb
    maxsize?: number;
}

const FileUpload: React.FC<props> = (props: props) => {
    const {uploadChange, extra, action, uploadText, accept, detail, disabled = false, fileType, maxsize = 1024} = props;
    const [fileList, setFileList] = useState<any[]>([]);
    const disFlage = disabled;

    useEffect(() => {
        const defaultFileList =
            (detail &&
                detail?.fileInfo && [
                    {
                        name: detail?.fileInfo.originalName,
                        status: 'done'
                        // url: detail?.fileInfo.objectUrl
                    }
                ]) ||
            [];
        setFileList(defaultFileList);
    }, [detail]);

    const uploadProps: uploadProps = {
        name: 'file',
        multiple: false,
        action: action,
        maxCount: 1,
        headers: {
            Authorization: getToken(),
            UUID: getUUID()
        },
        data: {},
        accept: accept,
        // defaultFileList: defaultFileList,
        fileList: fileList,
        onChange(info) {
            const {status, response} = info.file;
            if (!status) return;
            let curFileList = [...info.fileList];
            if (status !== 'uploading') {
                // console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                const {ret, content} = response;
                if (ret === 'SUCCESS') {
                    uploadChange && uploadChange(content);
                    message.success(`${info.file.name} 上传成功`);
                } else {
                    uploadChange && uploadChange('');
                    if (response.msg && response.msg) {
                        message.error(`${response.msg}` || `${info.file.name} 上传失败`);
                    }
                    curFileList = [];
                }
            } else if (status === 'error') {
                message.error(`${info.file.name} 上传失败`);
                uploadChange && uploadChange('');
                curFileList = [];
            }
            setFileList(curFileList);
        },
        // 上传前文件校验
        beforeUpload(file) {
            const max = maxsize;
            if (!fileType.includes(file.type)) {
                message.destroy();
                message.error(`请上传${accept}格式的文件`);
                setFileList([]);
                uploadChange && uploadChange('');
                return false;
            } else if (max && max * 1024 * 1024 < file.size) {
                message.destroy();
                message.error(`上传文件大小不超过${max}M`);
                setFileList([]);
                uploadChange && uploadChange('');
                return false;
            } 
                return true;
            
        },
        onRemove() {
            uploadChange && uploadChange('');
        },
        onDrop(e: any) {
            console.log('Dropped files', e.dataTransfer.files);
        }
    };

    // detail && Object.keys(detail).length > 0
    //     ? (uploadProps.defaultFileList = defaultFileList)
    //     : (uploadProps.fileList = fileList ? fileList : defaultFileList);

    return (
        <Space direction="vertical" style={{width: '400px'}}>
            <Upload {...uploadProps}>
                <Button disabled={disFlage} icon={<UploadOutlined />}>
                    {uploadText || '上传'}
                </Button>
            </Upload>
            {extra && <p style={{marginTop: '10px', color: 'rgba(0, 0, 0, .45)'}}>{extra}</p>}
        </Space>
    );
};

export default FileUpload;

index2.tsx

/**
 * @file 手动上传
 */
import React from 'react';
import {Button, Space, Upload} from 'antd';
import {DraggerProps} from 'antd/lib/upload';
import {UploadOutlined} from '@ant-design/icons';

interface uploadProps extends Partial<DraggerProps> {
    onDrop: any;
}
interface props {
    // 获取上传后的fileList
    uploadChange?: (fileList: any) => void;
    // 上传的格式提示
    extra?: string;
    // 上传按钮的文案
    uploadText?: string;
    // 支持的文件格式
    accept?: string;
    // 文件反显
    detail?: any;
    // 置灰
    disabled?: boolean;
}

const FileUpload: React.FC<props> = (props: props) => {
    const {uploadChange, extra, uploadText, accept, detail, disabled = false} = props;
    const disFlage = disabled;
    const uploadProps: uploadProps = {
        multiple: false,
        maxCount: 1,
        accept: accept,
        defaultFileList:
            (detail &&
                Object.keys(detail).length > 0 && [
                    {
                        name: detail?.fileInfo.originalName,
                        status: 'done'
                    }
                ]) ||
            [],
        beforeUpload(file) {
            uploadChange && uploadChange([file]);
            return false;
        },
        onRemove() {
            uploadChange && uploadChange('');
        },
        onDrop(e: any) {
            console.log('Dropped files', e.dataTransfer.files);
        }
    };
    return (
        <Space direction="vertical" style={{width: '400px'}}>
            <Upload {...uploadProps}>
                <Button disabled={disFlage} icon={<UploadOutlined />}>
                    {uploadText || '上传'}
                </Button>
            </Upload>
            {extra && <p style={{marginTop: '10px', color: 'rgba(0, 0, 0, .45)'}}>{extra}</p>}
        </Space>
    );
};

export default FileUpload;