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

相关推荐
惜.己1 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
YuTaoShao1 小时前
【LeetCode 热题 100】994. 腐烂的橘子——BFS
java·linux·算法·leetcode·宽度优先
退役小学生呀1 小时前
十五、K8s可观测能力:日志收集
linux·云原生·容器·kubernetes·k8s
van叶~1 小时前
Linux探秘坊-------15.线程概念与控制
linux·运维·服务器
Andy杨3 小时前
20250718-1-Kubernetes 应用程序生命周期管理-应用部署、升级、弹性_笔记
linux·docker·容器
写写闲篇儿7 小时前
Python+MongoDB高效开发组合
linux·python·mongodb
一个龙的传说8 小时前
linux 常用命令
linux·服务器·zookeeper
Ching·10 小时前
esp32使用ESP-IDF在Linux下的升级步骤,和遇到的坑Traceback (most recent call last):,及解决
linux·python·esp32·esp_idf升级
子柒s10 小时前
Linux 基础
linux