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

相关推荐
kfepiza20 分钟前
Linux创建网桥Bridge的方法有哪些? 笔记250710
linux·tcp/ip
sky丶Mamba1 小时前
CMD,PowerShell、Linux/MAC设置环境变量
linux·运维·macos
工藤新一¹2 小时前
Linux 开发工具
linux·运维·服务器
W111115_2 小时前
网络综合实验
linux·运维·服务器·网络
cui_win2 小时前
【网络】Linux 内核优化实战 - net.ipv4.tcp_sack
linux·网络·tcp/ip
x县豆瓣酱2 小时前
ubuntu server远程连接
linux·运维·ubuntu
0wioiw02 小时前
Ubuntu基础(Python虚拟环境和Vue)
linux·python·ubuntu
史不了2 小时前
无 sudo 运行:让你的程序在 Ubuntu 低端口监听
linux·运维·ubuntu
古希腊数通小白(ip在学)2 小时前
HCIA实现不同vlan间的通信
linux·服务器·网络
半桔2 小时前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构