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

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

单文件上传

 {         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('上传失败');             }         })     }} >上传

多文件上传

页面组件

 {         handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError)     }} >     批量上传 

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[]>([]);     const actionRef = useRef();     const [SortOrderTest, setSortOrderTest] = useState('');     const [valueEnums, setValueEnums] = useState({});     // 获取表格数据     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) => [                      {                             action && action.reload();                         }}                     />,                     >                         key={`delete_${record.id}`}                         params={record.id || ''}                         method={deleteDataById}                         callback={() => {                             action && action.reload();                         }}                     />,                      {                             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('上传失败');                                 }                             })                         }}                     >上传                     ,                      downLoadFileThis(record)}>下载                 ],             },         ]);     }     // 批量上传的方法     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 [              {                     handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError)                 }}             >                 批量上传                      ];     };     // 完成排序功能     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 (                      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 (                     >                         content={                             }>                                 {'批量删除'}                                                      }                         method={deleteDataById}                         params={selectedRowKeys}                         callback={() => actionRef.current && actionRef.current.reload()}                     />                 );             }}         />     ) } export default GradingFilingReport