陇西哪里能学做网站,官网建站系统,廊坊市建设局官方网站,网站提供的链接上传部分使用的是antd中的Upload组件,具体如下: GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可 单文件上传
Uploadkey{upload_${record.id}}showUploadList{false}accept.xlsxmaxCount{1}customRequest{({ file }) {const … 上传部分使用的是antd中的Upload组件,具体如下: GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可 单文件上传
Uploadkey{upload_${record.id}}showUploadList{false}accept.xlsxmaxCount{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] useStateProColumnsGradingFilingReportData[]([]);const actionRef useRefActionType();const [SortOrderTest, setSortOrderTest] useStatestring();const [valueEnums, setValueEnums] useStateGradingFilingReportSelect({});// 获取表格数据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 .xlsxlet id item.idlet downloadParams { id }let url /projectAcceptance/service/ratingFilingReportService/downloadReport/0downLoad(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();}}/,DeleteBtnArrayanykey{delete_${record.id}}params{record.id || }method{deleteDataById}callback{() {action action.reload();}}/,Uploadkey{upload_${record.id}}showUploadList{false}accept.xlsxmaxCount{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 (ProTableGradingFilingReportDatarowKeyidcardBorderedactionRef{actionRef}request{getData}columns{columns}search{{labelWidth: 100,}}onChange{handleChange}toolBarRender{toolBarRender}scroll{{ x: max-content }}rowSelection{{selections: [Table.SELECTION_ALL],}}tableAlertOptionRender{({ selectedRowKeys }) {return (DeleteBtnArrayanycontent{Button typelink icon{DeleteOutlined /}{批量删除}/Button}method{deleteDataById}params{selectedRowKeys}callback{() actionRef.current actionRef.current.reload()}/);}}/)
}
export default GradingFilingReport
