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

1.写一个上传

这里直接用upload组件即可

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

2.写props

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

相关推荐
轻松Ai享生活8 小时前
5 节课深入学习Linux Cgroups
linux
christine-rr9 小时前
linux常用命令(4)——压缩命令
linux·服务器·redis
三坛海会大神5559 小时前
LVS与Keepalived详解(二)LVS负载均衡实现实操
linux·负载均衡·lvs
東雪蓮☆9 小时前
深入理解 LVS-DR 模式与 Keepalived 高可用集群
linux·运维·服务器·lvs
乌萨奇也要立志学C++10 小时前
【Linux】进程概念(二):进程查看与 fork 初探
linux·运维·服务器
QQ35967734511 小时前
ArcGIS Pro实现基于 Excel 表格批量创建标准地理数据库(GDB)——高效数据库建库解决方案
数据库·arcgis·excel
獭.獭.12 小时前
Linux -- 信号【上】
linux·运维·服务器
hashiqimiya12 小时前
centos配置环境变量jdk
linux·运维·centos
hashiqimiya12 小时前
权限更改centos中系统文件无法创建文件夹,使用命令让普通用户具备操作文件夹
linux
逆小舟16 小时前
【Linux】人事档案——用户及组管理
linux·c++