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
相关文章:
react + pro-components + ts完成单文件上传和批量上传
上传部分使用的是antd中的Upload组件,具体如下: GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可 单文件上传 <Uploadkey{upload_${record.id}}showUploadList{false}accept".xlsx"maxCount{1}customRequest{({ file }) > {const …...
暑假第一周——ZARA仿写
iOS学习 前言首页:无限轮播图商城:分类我的:自定义cell总结 前言 结束了UI的基础学习,现在综合运用开始写第一个demo,在实践中提升。 首页:无限轮播图 先给出效果: 无限轮播图,顾…...
github.com/antchfx/jsonquery基本使用
要在 GitHub 上使用 antchfx/jsonquery 库来查找 JSON 文档中的元素,首先需要了解这个库的基本用法。jsonquery 是一个用于查询 JSON 数据的 Go 语言库,允许使用 XPath 表达式来查找和选择 JSON 数据中的元素。 以下是一些基本步骤和示例,演…...
【python虚拟环境管理】【mac m3】使用poetry管理python项目
文章目录 一. 为什么选择poetry二. poetry相关操作1. 创建并激活环境2. 依赖包管理2.1. 安装项目依赖1.2. 管理不同开发环境的依赖1.3. 依赖维护1.4. 项目相关 Poetry是Python中用于依赖管理和打包的工具。它允许您声明项目所依赖的库,并将为您管理(安装…...
《JavaSE》---16.<抽象类接口Object类>
目录 前言 一、抽象类 1.1什么是抽象类 1.2抽象类代码实现 1.3 抽象类特点 1.4抽象类的作用 二、接口 2.1什么是接口 2.2接口的代码书写 2.3 接口使用 2.4 接口特点 2.5 实现多个接口 快捷键(ctrl i ): 2.6接口的好处 2.7 接…...
简单修改,让UE4/5着色器编译速度变快
简单修改,让UE4/5着色器编译速度变快 目录 简单修改,让UE4/5着色器编译速度变快 一、问题描述 二、解决方法 (一)硬件升级 (二)调整相关设置和提升优先级 1.调整相关设置 (1)…...
如何查看极狐GitLab Helm Chart?
GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab :https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署…...
代码随想录算法训练营第十六天| 530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先
写代码的第十六天,自从到了二叉树错误版代码就少了,因为我自己根本没思路,都是看完思路在做,那基本上就是小语法问题,很少有其他问题了,证实了我好菜。。。。。。 还是得写思路啊啊啊啊,写思路好…...
NODEJS复习(ctfshow334-344)
NODEJS复习 web334 下载源码代码审计 发现账号密码 代码逻辑 var findUser function(name, password){ return users.find(function(item){ return name!CTFSHOW && item.username name.toUpperCase() && item.password password; }); }; 名字不等于ctf…...
【Go系列】RPC和grpc
承上启下 介绍完了Go怎么实现RESTFul api,不可避免的,今天必须得整一下rpc这个概念。rpc是什么呢,很多人都想把rpc和http一起对比,但是他们不是一个概念。RPC是一种思想,可以基于tcp,可以基于udp也可以基于…...
【VUE】v-if和v-for的优先级
v-if和v-for v-if 用来显示和隐藏元素 flag为true时,dom元素会被删除达到隐藏效果 <div class"boxIf" v-if"flag"></div>v-for用来进行遍历,可以遍历数字对象数组,会将整个元素遍历指定次数 <!-- 遍…...
【单目3D检测】smoke(1):模型方案详解
纵目发表的这篇单目3D目标检测论文不同于以往用2D预选框建立3D信息,而是采取直接回归3D信息,这种思路简单又高效,并不需要复杂的前后处理,而且是一种one stage方法,对于实际业务部署也很友好。 题目:SMOKE&…...
数据库系统概论:数据库系统的锁机制
引言 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中,数据作为一种共享资源,其并发访问的一致性和有效性是数据库必须解决的问题。锁机制通过对数据库中的数据对象(如表、行等)进行加锁,以确保在同…...
Django+vue自动化测试平台(28)-- ADB获取设备信息
概述 adb的全称为Android Debug Bridge,就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序,说白了就是调试工具。 adb的工作方式比较特殊,采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯,默认情况下…...
RESTful API设计指南:构建高效、可扩展和易用的API
文章目录 引言一、RESTful API概述1.1 什么是RESTful API1.2 RESTful API的重要性 二、RESTful API的基本原则2.1 资源导向设计2.2 HTTP方法的正确使用 三、URL设计3.1 使用名词而非动词3.2 使用复数形式表示资源集合 四、请求和响应设计4.1 HTTP状态码4.2 响应格式4.2.1 响应实…...
npm下载的依赖包版本号怎么看
npm下载的依赖包版本号怎么看 版本号一般分三个部分,主版本号、次版本号、补丁版本号。 主版本号:一般依赖包发生重大更新时,主版本号才回发生变化,如Vue2.x到Vue3.x。次版本号:当依赖包中发生了一些小变化ÿ…...
css前端面试题
1.什么是css盒子模型? 盒子模型包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。 标准盒子模型和IE盒子模型的区别在于其对元素的w…...
Vue从零到实战
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...
【Chatgpt大语言模型医学领域中如何应用】
随着人工智能技术 AI 的不断发展和应用,ChatGPT 作为一种强大的自然语言处理技术,无论是 自然语言处理、对话系统、机器翻译、内容生成、图像生成,还是语音识别、计算机视觉等方面,ChatGPT 都有着广泛的应用前景。特别在临床医学领…...
ES6 正则的扩展(十九)
1. 正则表达式字面量改进 特性:在 ES6 中,正则表达式字面量允许在字符串中使用斜杠(/)作为分隔符。 用法:简化正则表达式的书写。 const regex1 /foo/; const regex2 /foo/g; // 全局搜索2. u 修饰符(U…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
