对读取的Excel文件数据进行拆分并发请求发送到后端服务器

首先，我们先回顾一下文件的读取操作：

本地读取Excel文件并进行数据压缩传递到服务器-CSDN博客

第一步：根据以上博客，我们将原先的handleFile方法，改为以下内容：

const handleFile = async(e) => {
    console.time('test')
    const file = e.target.files[0];
    
    const results = await new Promise((resolve,reject) => {
        Papa.parse(file,{
            header:true,
            skipEmptyLines:true,
            complete:resolve, //成功时的回调
            error:reject //失败时的回调
        })
    })

    const data = results.data;
    console.log(data)

};

先对data数据进行打印，获取到一千多行的数据信息

那么如何对1000多条信息进行分组处理呢？？？

因为我们要对数据进行拆分，所以我们可以将此数据分成200个记录为一组的分组操作。

第二步：对数据进行分组操作

const batchSize = 200;
const dataChunks = [];
for(let i=0;i<data.length;i+=batchSize){
    const dataChunks = data.slice(i,i + batchSize);
    dataChunks.push(dataChunks);
}

console.log(data,dataChunks)

第三步：引入eachLimit并对此进行操作

import { eachLimit } from "async"; //引入第三方类库  需要安装

以下的handleFile的全部代码

    const [results,setResults] = useState([]); //保留解析后的数据
    const [progress,setProgress] = useState({completed:0,total:0});
    
    const handleFile = async(e) => {
        console.time('test')
        const file = e.target.files[0];
        
        const results = await new Promise((resolve,reject) => {
            Papa.parse(file,{
                header:true,
                skipEmptyLines:true,
                complete:resolve, //成功时的回调
                error:reject //失败时的回调
            })
        })
 
        const data = results.data;
        console.log(data)

        const batchSize = 200;
        const dataChunks = [];
        for(let i=0;i<data.length;i+=batchSize){
            const dataChunks = data.slice(i,i + batchSize);
            dataChunks.push(dataChunks);
        }

        console.log(data,dataChunks) //输出原先数据以及分组后的数据

        const processData = async(dataChunks) => {
            const totalChunks = dataChunks.length; //总共需要发送的请求次数
            let completedChunks = 0; //已经完成的请求次数
            const resultsArray = []; //保存所有请求的结果

            const notifyProgress = () => {
                setProgress({
                    completed: completedChunks,
                    total: totalChunks,
                })
            }
            await eachLimit(dataChunks,5,async(chunk) => {
                const gzip = pako.gzip(JSON.stringify(chunk),{to:"string"});
                try{
                    const response = await fetch('http://localhost:3000',{
                        method:"POST",
                        body:gzip,
                        headers:{
                            "Content-Type":"application/octet-stream",
                        }
                    });

                    const result = {
                        index:dataChunks.indexOf(chunk),
                        success:response.ok,
                        status:response.status,
                        message:response.statusText,
                    };

                    resultsArray.push(result);
                    completedChunks++;
                    notifyProgress();
                    setResults([...resultsArray]);
                }catch (error){
                    const result = {
                        index:dataChunks.indexOf(chunk),
                        success:false,
                        status:500,
                        message:error.message,
                    };
                    resultsArray.push(result);
                    completedChunks++;
                    notifyProgress();
                    setResults([...resultsArray]);
                }
            });
            console.timeEnd("test")
        }
        await processData(dataChunks);
    };

<input type="file" onChange={handleFile} accept='.csv' />

进度的展示

<h2>进度的展示</h2>
<div>
    Progress: { progress.completed } / { progress.total }
</div>

结果展示

<h2>结果显示</h2>
<ul>
    {results && 
        results.map(result => {
            return <li key={result.index}>
                {result.index} - {result.success.toString()} - {result.status} - {""}
                {result.message}
            </li>
        })
    }
</ul>

此时，我们就可以尝试读取一个文件进行测试