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

antd本地上传excel文件并读取文件的数据转为json

1.写一个上传

这里直接用upload组件即可

<Upload {...uploadProps} maxCount={1} accept={".xlsx"}><Button icon={<UploadOutlined />}>{`${formatMessage({id: 'clk_upload'}, {file: formatMessage({id: 'excel_file'})})}`}</Button></Upload>

2.写props

const uploadProps: any = {onRemove: (file: any) => {const index = fileList.indexOf(file);const newFileList = fileList.slice();newFileList.splice(index, 1);setFileList(newFileList);},beforeUpload: (file: any) => {let reader = new FileReader();reader.onload = function(event: any) {let data = new Uint8Array(event.target.result);let workbook = XLSX.read(data, {type: 'array'});let worksheet = workbook.Sheets[workbook.SheetNames[0]];let jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});reader.readAsArrayBuffer(file);setFileList(file?.name?.includes('xlsx') ? [file]: []);return false;},fileList};

beforeUpload函数里处理上传的数据转成Uint8Array,读取文件中的第一个表,使用.utils.sheet_to_json方法读出json数据,具体在进行处理即可。

相关文章:

antd本地上传excel文件并读取文件的数据转为json

1.写一个上传 这里直接用upload组件即可 <Upload {...uploadProps} maxCount{1} accept{".xlsx"}><Button icon{<UploadOutlined />}>{${formatMessage({id: clk_upload}, {file: formatMessage({id: excel_file})})}}</Button></Uploa…...

BI数据可视化:不要重复做报表,只需更新数据

BI数据可视化是一种将大量数据转化为视觉形式的过程&#xff0c;使得用户可以更容易地理解和分析数据。然而&#xff0c;传统的报表制作过程往往需要手动操作&#xff0c;不仅耗时还容易出错。为了解决这个问题&#xff0c;BI数据可视化工具通常会提供一些自动化的数据更新功能…...

fiddler抓包拦截请求转发到其他地址

使用Fiddler拦截请求转发到指定地址方便于本地调试&#xff0c;不需要进行打包切换地址&#xff0c;可以加快问题的确定修复效果 内容&#xff1a; 1&#xff1a;首先给app进行设置代理抓包内容&#xff0c;给进行 https://blog.csdn.net/qq_43717814/article/details/84317038…...

【Shell编程】| if 判断

最近在编写一些测试程序的时候&#xff0c;对if的使用较为片面&#xff0c;很多小的功能都需要去各个地方百度查询&#xff0c;极为不便&#xff0c;因此也想着空闲时候&#xff0c;对if进行详细总结&#xff0c;一来加深印象&#xff0c;二来是为了打造一个if语句的最详细的使…...

Java手动引入Maven依赖的Jar包

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

计算机毕设 基于大数据的社交平台数据爬虫舆情分析可视化系统

文章目录 0 前言1 课题背景2 实现效果**实现功能****可视化统计****web模块界面展示**3 LDA模型 4 情感分析方法**预处理**特征提取特征选择分类器选择实验 5 部分核心代码6 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕…...

conda取消自动进入base环境

安装conda后取消命令行前出现的base&#xff0c;则默认进入了conda环境&#xff0c;如果想取消每次启动自动激活conda的基础环境。 方法一 每次在命令行通过conda deactivate退出base环境回到系统自带的环境 如果再进入的话&#xff1a; conda deactivate 方法二 1&#…...

【文生图】Stable Diffusion XL 1.0模型Full Fine-tuning指南(U-Net全参微调)

文章目录 前言重要教程链接以海报生成微调为例总体流程数据获取POSTER-TEXTAutoPosterCGL-DatasetPKU PosterLayoutPosterT80KMovie & TV Series & Anime Posters 数据清洗与标注模型训练模型评估生成图片样例宠物包商品海报护肤精华商品海报 一些TipsMata&#xff1a;…...

STM32笔记—DMA

目录 一、DMA简介 二、DMA主要特性 三、DMA框图 3.1 DMA处理 3.2 仲裁器 3.3 DMA通道 扩展: 断言&#xff1a; 枚举&#xff1a; 3.4 可编程的数据传输宽度、对齐方式和数据大小端 3.5 DMA请求映像 四、DMA基本结构 4.1 DMA_Init配置 4.2 实现DMAADC扫描模式 实现要求…...

机器学习概论

一、机器学习概述 1、机器学习与人工智能、深度学习的关系 人工智能&#xff1a;机器展现的人类智能机器学习&#xff1a;计算机利用已有的数据(经验)&#xff0c;得出了某种模型&#xff0c;并利用此模型预测未来的一种方法。深度学习&#xff1a;实现机器学习的一种技术 2…...

卡尔曼家族从零解剖-(04)贝叶斯滤波→细节讨论,逻辑梳理,批量优化

讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解的 卡尔曼家族从零解剖 链接 :卡尔曼家族从零解剖-(00)目录最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/133846882 文末正下方中心提供了本人 联系…...

小菜React

1、Unterminated regular expression literal, 对于函数就写.ts&#xff0c;有dom元素就写.tsx 2、 The requested module /src/components/setup.tsx?t1699255799463 does not provide an export named Father export default useStore默认导出的钩子&#xff0c;组件引入的…...

新手用mac电脑,对文件的疑问和gpt回应

macOs系统安装软件的疑问 所有问题mac系统文件结构我用mac安装软件&#xff0c;不用像windows一样创建文件夹吗只能安装到Applications文件夹吗安装程序的指南和提供的安装选项是什么软件安装在Applications下的/appName文件夹&#xff0c;它的所有数据都会在该文件夹吗如果卸载…...

LeetCode|动态规划|392. 判断子序列、115. 不同的子序列、 583. 两个字符串的删除操作

目录 一、392. 判断子序列 1.题目描述 2.解题思路 3.代码实现(双指针解法) 4.代码实现&#xff08;动态规划解法&#xff09; 二、115. 不同的子序列 1.题目描述 2.解题思路 3.代码实现&#xff08;C语言版本&#xff09; 4.代码实现&#xff08;C版本&#xff09; …...

vscode 阅读 android以及kernel 源码

在Ubuntu系统中安装vscode 参考文档&#xff1a; https://blog.csdn.net/m0_57368670/article/details/127184424 1, 下载vscode https://code.visualstudio.com 2, 安装vscode $ sudo dpkg -i code_1.78.1-1683194560_amd64.deb 3, 打开vscode $ code vscode 阅读 android…...

Intel oneAPI笔记(3)--jupyter官方文档(SYCL Program Structure)学习笔记

前言 本文是对jupyterlab中oneAPI_Essentials/02_SYCL_Program_Structure文档的学习记录&#xff0c;包含对Device Selector、Data Parallel Kernel、Host Accessor、Buffer Destruction、的介绍&#xff0c;最后还有一个小关于向量&#xff08;Vector&#xff09;加法的实例 …...

verilog——移位寄存器

在Verilog中&#xff0c;你可以使用移位寄存器来实现数据的移位操作。移位寄存器是一种常用的数字电路&#xff0c;用于将数据向左或向右移动一个或多个位置。这在数字信号处理、通信系统和其他应用中非常有用。以下是一个使用Verilog实现的简单移位寄存器的示例&#xff1a; m…...

C++11 多线程学习笔记

1. thread — 线程篇 所需头文件&#xff1a;<thread> 1.1 构造函数 // 1 默认构造函数 thread() noexcept; // 2 移动构造函数&#xff0c;把other的所有权转移给新的thread对象&#xff0c;之后 other 不再表示执行线程。 thread( thread&& other ) noex…...

nn.embedding函数详解(pytorch)

提示&#xff1a;文章附有源码&#xff01;&#xff01;&#xff01; 文章目录 前言一、nn.embedding函数解释二、nn.embedding函数使用方法四、模型训练与预测的权重变化探讨 前言 最近发现prompt工程(如sam模型)&#xff0c;也有transform的detr模型等都使用了nn.Embedding函…...

gitee.com[0: xxx.xx.xxx.xx]: errno=Unknown error

git在提交或拉取代码的时候&#xff0c;遇到以下报错信息&#xff1a; Unable to connect to gitee.com[0: xxx.xx.xxx.xx]: errnoUnknown error 解决问题步骤&#xff1a; 1、找到自己的电脑上的git用户配置文件 文件位置位于&#xff1a;C:\Users\用户名\.gitconfig 比如我…...

Apache HBase与Spark集成终极指南:10个实时数据处理高效方案

Apache HBase与Spark集成终极指南&#xff1a;10个实时数据处理高效方案 【免费下载链接】hbase Apache HBase 项目地址: https://gitcode.com/GitHub_Trending/hb/hbase Apache HBase是一个高可靠性、高性能、面向列的分布式存储系统&#xff0c;非常适合存储海量结构化…...

图深度学习文献宝库LiteratureDL4Graph:一站式掌握图神经网络研究进展

图深度学习文献宝库LiteratureDL4Graph&#xff1a;一站式掌握图神经网络研究进展 【免费下载链接】LiteratureDL4Graph 项目地址: https://gitcode.com/gh_mirrors/li/LiteratureDL4Graph 想要快速掌握图神经网络(GNN)和图深度学习的最新研究进展吗&#xff1f;Litera…...

音乐标签编辑器:让本地音乐元数据管理效率提升90%的开源工具

音乐标签编辑器&#xff1a;让本地音乐元数据管理效率提升90%的开源工具 【免费下载链接】music-tag-web 音乐标签编辑器&#xff0c;可编辑本地音乐文件的元数据&#xff08;Editable local music file metadata.&#xff09; 项目地址: https://gitcode.com/gh_mirrors/mu/…...

Ostrakon-VL像素终端实战:为盲人顾客生成语音版货架导航

Ostrakon-VL像素终端实战&#xff1a;为盲人顾客生成语音版货架导航 1. 项目背景与价值 在零售场景中&#xff0c;视觉障碍顾客常常面临难以独立寻找商品的困境。传统解决方案依赖人工引导或专用盲道&#xff0c;成本高且灵活性不足。我们基于Ostrakon-VL-8B多模态大模型&…...

不止于超市:用QGIS缓冲区+叠置分析,为你的奶茶店、自习室找个好位置

从奶茶店到自习室&#xff1a;QGIS空间分析赋能小微商业选址决策 走在街头&#xff0c;你是否好奇为什么某些奶茶店总是门庭若市&#xff0c;而几步之隔的同类店铺却冷冷清清&#xff1f;商业选址从来不是简单的"地段好"三个字能概括的。对于资金有限的小微创业者来说…...

如何通过技术优化提升Element Plus开发效率

如何通过技术优化提升Element Plus开发效率 【免费下载链接】element-plus &#x1f389; A Vue.js 3 UI Library made by Element team 项目地址: https://gitcode.com/GitHub_Trending/el/element-plus 在前端开发过程中&#xff0c;Element Plus作为一款基于Vue.js 3…...

网络安全零基础入门:借助快马AI生成你的第一个防注入登录页面

作为一名刚接触网络安全的小白&#xff0c;我最近尝试用InsCode(快马)平台做了一个防注入的登录页面。整个过程比想象中简单很多&#xff0c;特别适合零基础入门。这里分享我的实践心得&#xff0c;希望能帮到同样想学习网络安全的朋友。 为什么选择登录页面作为切入点 登录功…...

通义千问1.5-1.8B-Chat-GPTQ-Int4场景应用:网络安全威胁情报的智能分析与报告生成

通义千问1.5-1.8B-Chat-GPTQ-Int4场景应用&#xff1a;网络安全威胁情报的智能分析与报告生成 1. 引言&#xff1a;当安全分析师遇上信息洪流 想象一下&#xff0c;你是一名网络安全分析师。凌晨三点&#xff0c;刺耳的告警声把你从睡梦中惊醒。屏幕上&#xff0c;来自防火墙…...

Wan2.2-I2V-A14B效果对比:LSTM时序预测辅助下的动态剧情生成

Wan2.2-I2V-A14B效果对比&#xff1a;LSTM时序预测辅助下的动态剧情生成 1. 引言 想象一下&#xff0c;当你输入一段文字描述&#xff0c;AI不仅能生成对应的视频&#xff0c;还能像专业导演一样把控剧情节奏和情感起伏。这正是Wan2.2-I2V-A14B结合LSTM时序预测技术带来的突破…...

2026前端面试题

1.vue的通信方式Vue组件通信方式根据组件间的关系&#xff08;父子、兄弟、跨级、任意组件&#xff09;可分为多种方案。一、父子组件通信props&#xff08;父-子&#xff09;父组件通过属性向子组件传递数据&#xff0c;子组件通过defineProps接收<!-- 父组件 --> <C…...