React antd ts 上传xlsx文件解析 报错 解决

React antd ts 上传xlsx文件解析 报错 TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'.

之前是

fileReader.readAsBinaryString(file.fileList[0]);

百度谷歌得知是ant组件给原生文件外面又包了一层，所以其实.originFileObj 才是要解析的文件

所以改成

fileReader.readAsBinaryString(file.fileList[0].originFileObj);

就能正常解析xlsx文件啦

完整代码 先安装插件

yarn add xlsx

后面是在页面引入就可以了

import * as XLSX from 'xlsx';
...

const uploadChange = (file:any)=>{
        console.log(file)
        // 通过FileReader对象读取文件
        
        const fileReader = new FileReader();
        // 以二进制方式打开文件 file.fileList[0].originFileObj
        fileReader.readAsBinaryString(file.fileList[0].originFileObj);
        fileReader.onload = event => {
        try {
            const {result} = event.target;
            // 以二进制流方式读取得到整份excel表格对象
            const workbook = XLSX.read(result, {type: 'binary'});
            // 存储获取到的数据
            let data = {};
            // 遍历每张工作表进行读取（这里默认只读取第一张表）
            for(const sheet in workbook.Sheets) {
                let tempData = [];
                // esline-disable-next-line
                if(workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法将 excel 转成 json 数据
                    console.log(sheet);
                    data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                }
            }
            const excelData = data.Sheet1;
            const excelHeader = [];
            // 获取表头
            for(const headerAttr in excelData[0]) {
                const header = {
                    title: headerAttr,
                    dataIndex: headerAttr,
                    key: headerAttr
                };
                excelHeader.push(header);
            }
            // 最终获取到并且格式化后的 json 数据
            console.log(excelData);
            console.log(excelHeader);
          
        } catch(e) {
            // 这里可以抛出文件类型错误不正确的相关提示
            console.log(e);
            console.log('文件类型不正确！');
        }
        };
    }
    
...


<Dragger name="file" accept=".xls,.xlsx" maxCount={1} onChange={uploadChange}>
    <div className="upload-wrap">
        <img className="upload-icon" src="../../../assets/images/upload-icon.png" alt="" />
        <Button >选择文件</Button>
        <p className="upload-tip">
           可支持上传文件为：xls、slsx
        </p>
    </div>
</Dragger>