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

news/2024/7/24 2:32:23 标签: excel, json, linux

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数据,具体在进行处理即可。


http://www.niftyadmin.cn/n/5157043.html

相关文章

Mysql数据库的备份和恢复及日志管理

一、数据备份概述 1.1 备份的分类 完全备份&#xff1a;整个数据库完整地进行备份 增量备份&#xff1a;在完全备份的基础之上&#xff0c;对后续新增的内容进行备份 冷备份&#xff1a;关机备份&#xff0c;停止mysql服务&#xff0c;然后进行备份 热备份&#xff1a;开机备…

自动驾驶算法(七):基于遗传算法的路径规划(下)

目录 1 遗传选择 2 遗传交叉 3 遗传变异 4 结语 1 遗传选择 我们书接上回&#xff0c;我们完成了种群的初始化&#xff0c;将所有的种群放入了new_pop1中&#xff0c;这个new_pop1是一个&#xff08;种群大小 * 路径&#xff09;的一个矩阵&#xff0c;我们来看如何进行遗传…

美国阿贡国家实验室发布快速自动扫描套件 FAST,助力显微技术「快速阅读」成为可能

「我高兴地在北京市的天安门广场上看红色的国旗升起」 快速阅读一下这个句子&#xff0c;大家可能会发现&#xff0c;只需「我在天安门广场看升旗」几个字&#xff0c;就能概述我们需要的信息&#xff0c;也就是说&#xff0c;无需逐字逐句地阅读&#xff0c;抓住重点即可破译…

【网络协议】聊聊HTTPDNS如何工作的

传统 DNS 存在哪些问题&#xff1f; 域名缓存问题 我们知道CND会进行域名解析&#xff0c;但是由于本地会进行缓存对应的域名-ip地址&#xff0c;所以可能出现过期数据的情况。 域名转发问题 出口 NAT 问题 域名更新问题 解析延迟问题 因为在解析DNS的时候&#xff0c;需要进行…

物理场仿真教程(一)——Ubuntu下Salome_meca 软件安装

一、什么是Salome_meca &#xff1f; Salome_meca 是一个开源的有限元分析软件套件&#xff0c;主要用于模拟和分析复杂的力学问题。它是 Salome 平台的一部分&#xff0c;Salome 是一个通用的集成化软件环境&#xff0c;用于建模、预处理、模拟和后处理各种复杂的工程和科学问…

vue2 集成 - 超图-SuperMap iClient3D for WebGL

1:下载SuperMap iClient3D for WebGL SuperMap iClient3D for WebGL产品包 打开资源目录如下 2:格式化项目中所用的依赖包 开发指南 从超图官网下载SuperMap iClient3D 11i (2023) SP1 for WebGL_CN.zip解压后,将Build目录下的SuperMap3D复制到项目中 \public\static…

Python基础入门例程43-NP43 判断布尔值(条件语句)

最近的博文&#xff1a; Python基础入门例程42-NP42 公式计算器&#xff08;运算符&#xff09;-CSDN博客 Python基础入门例程41-NP41 二进制位运算&#xff08;运算符&#xff09;-CSDN博客 Python基础入门例程40-NP40 俱乐部的成员&#xff08;运算符&#xff09;-CSDN博客…

军用机场信息化数字孪生监测平台助力企业运营

随着直升机的不断发展&#xff0c;其在军用和民用领域得到越来越广泛的应用&#xff0c;在民用领域直升机广泛用于客货运输、紧急救援、农林作业、地质勘探、油气开发、公安巡逻等。直升机相关经营数据也逐渐被重视起来&#xff0c;数字孪生公司深圳华锐视点通过web3d开发构建虚…