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

相关推荐
x县豆瓣酱7 分钟前
ubuntu server配置静态IP
linux·运维·ubuntu
工藤新一¹11 分钟前
Linux
linux·运维·服务器
许白掰1 小时前
Linux入门篇学习——Linux 编写第一个自己的命令
linux·运维·数据库·嵌入式硬件·学习
打不了嗝 ᥬ᭄1 小时前
文件系统----底层架构
linux·运维·数据库
大虫小呓1 小时前
50个Python处理Excel示例代码,覆盖95%日常使用场景-全网最全
python·excel
cui_win1 小时前
【网络】Linux 内核优化实战 - net.ipv4.tcp_keepalive_time
linux·网络·tcp/ip
kfepiza2 小时前
Linux创建网桥Bridge的方法有哪些? 笔记250710
linux·tcp/ip
sky丶Mamba3 小时前
CMD,PowerShell、Linux/MAC设置环境变量
linux·运维·macos
工藤新一¹3 小时前
Linux 开发工具
linux·运维·服务器
W111115_3 小时前
网络综合实验
linux·运维·服务器·网络