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

相关推荐
期待着201317 分钟前
StarRocks 集群安装部署文档
linux·服务器
凤凰战士芭比Q19 分钟前
部署PHP8.4(KylinV10SP3、Ubuntu2204、Rocky9.3)
linux
haimin03711 小时前
ubuntu 20.04 安装xrdp远程桌面访问
linux·运维·ubuntu
liu****1 小时前
4.基础开发工具(一)
linux·开发语言·1024程序员节
乌托邦的逃亡者2 小时前
Linux系统中配置history命令显示时间、IP、账号和操作命令
linux·运维·安全
趙小贞2 小时前
字符设备驱动开发流程与实战:以 LED 驱动为例
linux·c语言·驱动开发
Wang's Blog3 小时前
Linux小课堂: Vim与Emacs之Linux文本编辑器的双雄格局及Vim安装启动详解
linux·vim·emacs
观山岳五楼3 小时前
unbuntu系统配置IPV6的三种模式
linux·服务器·ip·1024程序员节
运维行者_3 小时前
AWS云服务故障复盘——从故障中汲取的 IT 运维经验
大数据·linux·运维·服务器·人工智能·云计算·aws
王道长服务器 | 亚马逊云3 小时前
AWS Systems Manager:批量服务器管理的隐藏利器
linux·网络·云计算·智能路由器·aws