react中,使用antd的Upload组件上传zip压缩包文件

ops/2025/1/17 12:14:03/

需求

使用antd的Upload上传.zip压缩包文件

代码

javascript">const [uploadLoaing, setUploadLoaing] = useState(false);// 辅助函数:检查文件是否为zip格式function isZipFile(file: File): boolean {const fileType = file.type;return fileType === 'application/zip' || file.name.endsWith('.zip');}const props= {name: 'file',multiple: false,action: `${envConfig.baseURL}/model/import`,   //上传的接口地址headers: {'X-Webtoken': getToken() || '',   //请求头携带token},accept: '.zip',showUploadList: false,onChange(info) {console.log('info=>', info);const { status } = info.file;if (status === 'uploading') {setUploadLoaing(true);}if (status === 'done') {if (info.file.response.code === 0) {message.success(`文件导入成功`);setUploadLoaing(false);} else {const errorMsg = info.file.response.data?.[0] || info.file.response.desc || '文件导入失败';message.error(errorMsg);setUploadLoaing(false);}} else if (status === 'error') {message.error(`文件导入失败`);setUploadLoaing(false);}},beforeUpload(file) {const isZip = isZipFile(file);const maxSize = 200 * 1024 * 1024;if (!isZip) {message.error('请上传一个压缩包文件。');} else if (file.size > maxSize) {message.error('文件大小不能超过200兆。');}return isZip && file.size <= maxSize;   //若返回false,则阻止上传行为},
};<Upload {...props}><Button loading={uploadLoaing}>上传</Button>
</Upload>


http://www.ppmy.cn/ops/150796.html

相关文章

Java并发编程——线程池(基础,使用,拒绝策略,命名,提交方式,状态)

文章目录 线程池&#x1f3ca;线程池的好处&#x1f44d;线程池的创建&#x1f3d7;️线程池(ThreadPoolExecutor)常见参数&#x1f522;处理任务流程&#x1f503;拒绝策略⭐使用数据库任务表来自定义拒绝策略 线程池中两种提交方式线程池命名♂️♀️线程池状态 线程池&#…

python之二维几何学习笔记

一、概要 资料来源《机械工程师Python编程&#xff1a;入门、实战与进阶》安琪儿索拉奥尔巴塞塔 2024年6月 点和向量&#xff1a;向量的缩放、范数、点乘、叉乘、旋转、平行、垂直、夹角直线和线段&#xff1a;线段中点、离线段最近的点、线段的交点、直线交点、线段的垂直平…

Docker中编码和时区设置不生效问题排查

一、编码不生效排查 在 docker-compose.yml 中设置了环境变量&#xff0c;但进入 Docker 容器后 LANG 仍然显示为 zh_CN.UTF-8&#xff0c;按照以下步骤进行排查和修复&#xff1a; 1. 确保设置正确 确保你的 docker-compose.yml 文件中环境变量设置没有拼写错误&#xff0c;示…

【深度学习】Pytorch:自实现残差网络

ResNet&#xff08;残差网络&#xff09;是由何凯明等人在2015年发表的论文《深度残差学习用于图像识别》中提出的一种开创性深度学习架构。它在ILSVRC 2015分类任务中获胜&#xff0c;并解决了深度神经网络中的退化问题&#xff0c;使得训练数百甚至数千层的网络成为可能。 残…

Android 播放SMB共享视频

表面上看MediaPlayer只能播放本地和http协议视频。没有直接支持smb://协议。那还能播放smb视频呢&#xff1f;也可以的&#xff01; MediaPlayer有一个方法叫&#xff1a;setDataSource(MediaDataSource)。 /*** Sets the data source (MediaDataSource) to use.** param data…

Swift 专题二 语法速查

一 、变量 let, var 变量是可变的&#xff0c;使用 var 修饰&#xff0c;常量是不可变的&#xff0c;使用 let 修饰。类、结构体和枚举里的变量是属性。 var v1:String "hi" // 标注类型 var v2 "类型推导" let l1 "标题" // 常量class a {…

【设计模式-结构型】装饰器模式

一、什么是装饰器模式 装饰器模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它的核心思想是在不改变原有对象结构的情况下&#xff0c;动态地给对象增加一些功能&#xff0c;从而达到扩展功能的目的。举个例子&#xff0c;今天在家妈妈给蒸馒…

python密码学列置换加密解密程序

1.置换密码 置换密码&#xff08;Permutation Cipher)又叫换位密码&#xff08;Transposi-tionCipher)&#xff0c;它根据一定的规则重新排列明文&#xff0c;以便打破明文的结构特性。置换密码的特点是保持明文的所有字符不变&#xff0c;只是利用置换打乱了明文字符的位置和次…