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

起来改bug

于 2023-11-06 10:46:24 发布

阅读量894

点赞数 1

文章标签： excel json linux

本文链接：https://blog.youkuaiyun.com/q553866469/article/details/134241287

版权

文章介绍了如何在React中使用Upload组件上传Excel文件，并提供了beforeUploadprop的详细处理，包括数据转换为Uint8Array，解析XLSX文件为JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.写一个上传

这里直接用upload组件即可

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

2.写props

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