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

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

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

单文件上传

<Uploadkey={`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>

多文件上传

页面组件

<UploadshowUploadList={false}multiplecustomRequest={({ 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.idlet 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) => [<AddEditModalkey={`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();}}/>,<Uploadkey={`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 [<UploadshowUploadList={false}multiplecustomRequest={({ 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"cardBorderedactionRef={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