当前位置: 首页 > news >正文

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学习 前言首页&#xff1a;无限轮播图商城&#xff1a;分类我的&#xff1a;自定义cell总结 前言 结束了UI的基础学习&#xff0c;现在综合运用开始写第一个demo&#xff0c;在实践中提升。 首页&#xff1a;无限轮播图 先给出效果&#xff1a; 无限轮播图&#xff0c;顾…...

github.com/antchfx/jsonquery基本使用

要在 GitHub 上使用 antchfx/jsonquery 库来查找 JSON 文档中的元素&#xff0c;首先需要了解这个库的基本用法。jsonquery 是一个用于查询 JSON 数据的 Go 语言库&#xff0c;允许使用 XPath 表达式来查找和选择 JSON 数据中的元素。 以下是一些基本步骤和示例&#xff0c;演…...

【python虚拟环境管理】【mac m3】使用poetry管理python项目

文章目录 一. 为什么选择poetry二. poetry相关操作1. 创建并激活环境2. 依赖包管理2.1. 安装项目依赖1.2. 管理不同开发环境的依赖1.3. 依赖维护1.4. 项目相关 Poetry是Python中用于依赖管理和打包的工具。它允许您声明项目所依赖的库&#xff0c;并将为您管理&#xff08;安装…...

《JavaSE》---16.<抽象类接口Object类>

目录 前言 一、抽象类 1.1什么是抽象类 1.2抽象类代码实现 1.3 抽象类特点 1.4抽象类的作用 二、接口 2.1什么是接口 2.2接口的代码书写 2.3 接口使用 2.4 接口特点 2.5 实现多个接口 快捷键&#xff08;ctrl i &#xff09;&#xff1a; 2.6接口的好处 2.7 接…...

简单修改,让UE4/5着色器编译速度变快

简单修改&#xff0c;让UE4/5着色器编译速度变快 目录 简单修改&#xff0c;让UE4/5着色器编译速度变快 一、问题描述 二、解决方法 &#xff08;一&#xff09;硬件升级 &#xff08;二&#xff09;调整相关设置和提升优先级 1.调整相关设置 &#xff08;1&#xff09…...

如何查看极狐GitLab Helm Chart?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…...

代码随想录算法训练营第十六天| 530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先

写代码的第十六天&#xff0c;自从到了二叉树错误版代码就少了&#xff0c;因为我自己根本没思路&#xff0c;都是看完思路在做&#xff0c;那基本上就是小语法问题&#xff0c;很少有其他问题了&#xff0c;证实了我好菜。。。。。。 还是得写思路啊啊啊啊&#xff0c;写思路好…...

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&#xff0c;不可避免的&#xff0c;今天必须得整一下rpc这个概念。rpc是什么呢&#xff0c;很多人都想把rpc和http一起对比&#xff0c;但是他们不是一个概念。RPC是一种思想&#xff0c;可以基于tcp&#xff0c;可以基于udp也可以基于…...

【VUE】v-if和v-for的优先级

v-if和v-for v-if 用来显示和隐藏元素 flag为true时&#xff0c;dom元素会被删除达到隐藏效果 <div class"boxIf" v-if"flag"></div>v-for用来进行遍历&#xff0c;可以遍历数字对象数组&#xff0c;会将整个元素遍历指定次数 <!-- 遍…...

【单目3D检测】smoke(1):模型方案详解

纵目发表的这篇单目3D目标检测论文不同于以往用2D预选框建立3D信息&#xff0c;而是采取直接回归3D信息&#xff0c;这种思路简单又高效&#xff0c;并不需要复杂的前后处理&#xff0c;而且是一种one stage方法&#xff0c;对于实际业务部署也很友好。 题目&#xff1a;SMOKE&…...

数据库系统概论:数据库系统的锁机制

引言 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;数据作为一种共享资源&#xff0c;其并发访问的一致性和有效性是数据库必须解决的问题。锁机制通过对数据库中的数据对象&#xff08;如表、行等&#xff09;进行加锁&#xff0c;以确保在同…...

Django+vue自动化测试平台(28)-- ADB获取设备信息

概述 adb的全称为Android Debug Bridge&#xff0c;就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序&#xff0c;说白了就是调试工具。 adb的工作方式比较特殊&#xff0c;采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯&#xff0c;默认情况下…...

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下载的依赖包版本号怎么看 版本号一般分三个部分&#xff0c;主版本号、次版本号、补丁版本号。 主版本号&#xff1a;一般依赖包发生重大更新时&#xff0c;主版本号才回发生变化&#xff0c;如Vue2.x到Vue3.x。次版本号&#xff1a;当依赖包中发生了一些小变化&#xff…...

css前端面试题

1.什么是css盒子模型&#xff1f; 盒子模型包含了元素内容&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;border&#xff09;、外边距&#xff08;margin&#xff09;几个要素。 标准盒子模型和IE盒子模型的区别在于其对元素的w…...

Vue从零到实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

【Chatgpt大语言模型医学领域中如何应用】

随着人工智能技术 AI 的不断发展和应用&#xff0c;ChatGPT 作为一种强大的自然语言处理技术&#xff0c;无论是 自然语言处理、对话系统、机器翻译、内容生成、图像生成&#xff0c;还是语音识别、计算机视觉等方面&#xff0c;ChatGPT 都有着广泛的应用前景。特别在临床医学领…...

ES6 正则的扩展(十九)

1. 正则表达式字面量改进 特性&#xff1a;在 ES6 中&#xff0c;正则表达式字面量允许在字符串中使用斜杠&#xff08;/&#xff09;作为分隔符。 用法&#xff1a;简化正则表达式的书写。 const regex1 /foo/; const regex2 /foo/g; // 全局搜索2. u 修饰符&#xff08;U…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...