react antd 前端解析csv文件

import { Button, message, Upload } from 'antd';
import React from 'react';
import Papa from 'papaparse'; // 解析cvs插件 市面上使用较多的
import jschardet from 'jschardet'; // 编码识别

type ImportSvcFileProps = {
  disabled?: boolean;
  beforeUpload: (list: string[]) => void;
};

const ImportSvcFile: React.FC<ImportSvcFileProps> = (props) => {
  //这种方式得到的是一种二进制串
  const checkEncoding = (base64Str: string) => {
    const str = window.atob(base64Str.split(';base64,')[1]); // 用于解码使用 base-64 编码的字符
    let encodingMap = jschardet.detect(str);
    let encoding = '';
    encoding = encodingMap.encoding;
    // 有时候会识别错误
    if (encoding === 'windows-1252') {
      encoding = 'ANSI';
    }
    return encoding;
  };
  const uploadProps = {
    showUploadList: false,
    beforeUpload: (file: any) => {
      const fReader = new FileReader();
      //  readAsDataURL 读取本地文件 得到的是一个base64值
      fReader.readAsDataURL(file);
      // 读取文件成功
      fReader.onload = function (evt) {
        const data = evt.target?.result;
        if (typeof data === 'string') {
          const encoding = checkEncoding(data);
          //papaparse.js 用来解析转换成二维数组
          Papa.parse(file, {
            encoding: encoding,
            complete: function (results) {
              // UTF8 \r\n与\n混用时有可能会出问题
              const res = results.data;
              let list: string[] = [];
              //去除最后的空行 有些解析数据尾部会多出空格
              if (res[res.length - 1] === '') {
                res.pop();
              }
              res.forEach((item: any) => {
                for (let i = 0; i < item.length; i++) {
                  let newItem = item[i].trim();
                  let index = list.indexOf(newItem);
                  if (newItem !== '' && index === -1) {
                    list.push(item[i].trim());
                  }
                }
              });
              if (list.length > 300) {
                message.warning('最多一次导入300条');
                return false;
              }
              // addRegisterMachine('batch', list);
              props.beforeUpload(list);
            },
          });
        }
      };
      return false;
    },
  };

  return (
    <Upload {...uploadProps}>
      <Button disabled={props.disabled}>导入CSV模板</Button>
    </Upload>
  );
};

export default ImportSvcFile;