react + pro-components + ts完成单文件上传和批量上传

上传部分使用的是antd中的Upload组件,具体如下:

GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可

单文件上传

<Upload
    key={`upload_${record.id}`}
    showUploadList={false}
    accept=".xlsx"
    maxCount={1}
    customRequest={({ file }) => {
        const formData = new FormData();
        formData.append('id', record.id);
        formData.append('ins', file);
        GradingFilingReportUpload(formData).then(res => {
            if (res.state === 200) {
                message.success(res.message);
            } else {
                message.error('上传失败');
            }
        })
    }}
><a >上传</a></Upload>

多文件上传

页面组件

<Upload
    showUploadList={false}
    multiple
    customRequest={({ file, onSuccess, onError }) => {
        handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError)
    }}
>
    <a >批量上传</a>
</Upload>

js逻辑

    const handleRequestAllFile = async (fileList: any[]) => {
        try {
            const formData = new FormData();
            fileList.forEach((file) => {
                formData.append('ins', file);
            })
            const res = await GradingFilingReportUpload(formData);
            if (res.state === 200) {
                message.success('文件上传成功');
            } else {
                message.error('文件上传失败');
            }
        } catch (e) {
            message.error('文件上传过程出错')
        }
    }

完整页面代码

import { downLoad, downLoadStream } from '@/util/request';
import { ProTable } from '@ant-design/pro-components';
import { getTableColumns } from './colums'
import { useEffect, useRef, useState } from 'react';
import DeleteBtn from './components/DeleteBtn';
import { Button, Table, Upload, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import type { GradingFilingReportData, GradingFilingReportSelect } from '@/types/GradingFilingReport';
import { GradingFilingReportDataList, deleteDataById, GradingFilingReportUpload } from '@/service/GradingFilingReport'
import AddEditModal, { MODAL_TYPE } from './components/AddEditModal';
const GradingFilingReport = () => {
    const [columns, setColumns] = useState<ProColumns<GradingFilingReportData>[]>([]);
    const actionRef = useRef<ActionType>();
    const [SortOrderTest, setSortOrderTest] = useState<string>('');
    const [valueEnums, setValueEnums] = useState<GradingFilingReportSelect>({});
    // 获取表格数据
    const getData = async (filter: any) => {
        const params = { ...filter, offSet: filter.current, orderType: SortOrderTest };
        delete params.current;
        const { state, total, data } = (await GradingFilingReportDataList(params)) || {};
        if (state === 200) {
            return { data, success: true, total: total };
        } else {
            return { data: [] };
        }
    };
    // 下载文件
    const downLoadFileThis = async (item: any) => {
        let fileName = item.systemName + '.xlsx'
        let id = item.id
        let downloadParams = { id }
        let url = '/projectAcceptance/service/ratingFilingReportService/downloadReport/0'
        downLoad(url, downloadParams).then(res => {
            downLoadStream(res, fileName);
        }).catch((e) => {
            message.error('导出失败');
        }).finally(() => {
            console.log('完成');
        })
    }
    // 获取表格的表头数据
    const getTableConfig = async () => {
        const { columns, valueEnums } = await getTableColumns();
        setValueEnums(valueEnums);
        setColumns([
            ...columns,
            {
                title: '操作',
                valueType: 'option',
                key: 'option',
                fixed: 'right',
                width: 160,
                align: 'center',
                render: (text, record: any, index, action) => [
                    <AddEditModal
                        key={`edit_${record.id}`}
                        type={MODAL_TYPE.EDIT}
                        record={record}
                        valueEnums={valueEnums}
                        callback={() => {
                            action && action.reload();
                        }}
                    />,
                    <DeleteBtn<Array<any>>
                        key={`delete_${record.id}`}
                        params={record.id || ''}
                        method={deleteDataById}
                        callback={() => {
                            action && action.reload();
                        }}
                    />,
                    <Upload
                        key={`upload_${record.id}`}
                        showUploadList={false}
                        accept=".xlsx"
                        maxCount={1}
                        customRequest={({ file }) => {
                            const formData = new FormData();
                            formData.append('id', record.id);
                            formData.append('ins', file);
                            GradingFilingReportUpload(formData).then(res => {
                                if (res.state === 200) {
                                    message.success(res.message);
                                } else {
                                    message.error('上传失败');
                                }
                            })
                        }}
                    ><a >上传</a></Upload>
                    ,
                    <a key={`download_${record.id}`} onClick={() => downLoadFileThis(record)}>下载</a>
                ],
            },
        ]);
    }
    // 批量上传的方法
    const handleRequestAllFile = async (fileList: any[]) => {
        try {
            const formData = new FormData();
            fileList.forEach((file) => {
                formData.append('ins', file);
            })
            const res = await GradingFilingReportUpload(formData);
            if (res.state === 200) {
                message.success('文件上传成功');
            } else {
                message.error('文件上传失败');
            }
        } catch (e) {
            message.error('文件上传过程出错')
        }
    }
    // 批量上传的按钮
    const toolBarRender = (action: ActionType | undefined) => {
        return [
            <Upload
                showUploadList={false}
                multiple
                customRequest={({ file, onSuccess, onError }) => {
                    handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError)
                }}
            >
                <a >批量上传</a>
            </Upload>
        ];
    };
    // 完成排序功能
    const handleChange = (pagination: any, filters: any, sorter: any) => {
        console.log(sorter, 'sorter');
        if (sorter.order !== undefined) {
            setSortOrderTest(sorter.order === 'descend' ? 'DESC' : 'ASC');
        }
    };
    // 初始化调用
    useEffect(() => {
        getTableConfig()
    }, [])
    return (
        <ProTable<GradingFilingReportData>
            rowKey="id"
            cardBordered
            actionRef={actionRef}
            request={getData}
            columns={columns}
            search={{
                labelWidth: 100,
            }}
            onChange={handleChange}
            toolBarRender={toolBarRender}
            scroll={{ x: 'max-content' }}
            rowSelection={{
                selections: [Table.SELECTION_ALL],
            }}
            tableAlertOptionRender={({ selectedRowKeys }) => {
                return (
                    <DeleteBtn<Array<any>>
                        content={
                            <Button type="link" icon={<DeleteOutlined />}>
                                {'批量删除'}
                            </Button>
                        }
                        method={deleteDataById}
                        params={selectedRowKeys}
                        callback={() => actionRef.current && actionRef.current.reload()}
                    />
                );
            }}
        />
    )
}
export default GradingFilingReport