前端项目实战130-hook对文件上传进行封装笔记

import React, { useState, useEffect, useCallback, memo } from 'react';
import { Menu } from './service';
import { Select, Table, Button, Modal, message, Card, Form, Tag, DatePicker, Upload, Row, Col, Input, Radio, InputNumber } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { getToken } from '@/utils/auth';
import uploadFile from "@/redux/uploadFile";
interface AddOrEditMenuProps {
    visible: boolean;
    menu: Menu | null;
    croppData: any,
    onClose: () => void;
    onConfirm: () => void;
    list: any[]
}
const ExportModel: React.FC<any> = (props: AddOrEditMenuProps) => {
    const { visible } = props
    const [fileLoading, setFileLoading] = useState<boolean>(false)
    const [fileList, setFileList] = useState<any[]>([
    ]);
    const onRemove = (file: any) => {
        setFileList(
            []
        )
        setFileLoading(false)
    }
    const beforeUpload = (file: any) => {
        // 设置上传文件大小小于50M
        const isLt50M = file.size / 1024 / 1024 < 50;
        console.log(file,"data")
        const isJpgOrPng = file.name.split(".")[1] == 'xlsx' || file.type == 'xls';
        if (!isJpgOrPng) {
            message.error('上传的数据格式必须是xlsx或者xls格式');
            return false
        }
        if (!fileList.length) {
            if (!isLt50M) {
                message.error('文件不允许超过50M！');
            } else {
                setFileList(
                    [...fileList, file]
                )
                let formData = new FormData();
                formData.append('file', file)
                uploadFile('manufacture/importData', formData).then((res) => {
                    if (res.code == 200) {
                        message.success("上传成功")
                        setFileLoading(true)
                    }
                })
            }
        } else {
            message.error('只能上传一个文件');
            return false;
        }
    };
    const onOk = (() => {
        props.onConfirm()
    })
    return (
        <div>
            <Modal maskClosable={false}
 
                width="60%"
                visible={visible}
                title="表格导入"
                onCancel={props.onClose}
                onOk={onOk}>
                <Form.Item
                    labelCol={{ span: 8 }}
                    label="表格导入"
                >
                    <Upload name="file"
                        fileList={fileList}
                        beforeUpload={beforeUpload}
                        onRemove={onRemove}
                        headers={{ "Authorization": getToken() || "" }}
                    >
                        <Button icon={<UploadOutlined />}
                        >上传</Button>
                    </Upload>
                </Form.Item>
 
            </Modal >
        </div >
    )
 
 
}
 
export default ExportModel