采用slice进行文件切割时,通过FileReader去获取每个切割元素的result报错.

1.利用slice和fileReader实现一个大文件切割的测试,思路为对input type="file"的onchange中获得的files[0]文件,按照chunkSize大小,对其进行切分采用files[0].slice(start,end),且在切分过程中通过每次实例化一个FileReader对象,并通过监听onLoad事件,并在onLoad后去获取其对应的result,结果报错。
2.`<!Doctype>
<html>
<head>

<title>This is a test about file</title>

</head>
<body>

<input type="file" id="myfile" name="myfile" onchange="dealup()"/>
<button onclick="showresult()">Show result</button>

</body>
<script>

const chunkSize = 10;
var myresult = new Array();
function dealup() {
    var file =document.getElementById("myfile").files[0];
    var chunks = Math.ceil(file.size/chunkSize);
    var filder = new Array(chunks);
    var start = 0,end = 0;
    console.log("文件总尺寸"+file.size);
    for(let curindex = 0; curindex < chunks;curindex++) {
            var tempcell = {
            data: "",
            n: 0
        };
        if(file.size-start <= chunkSize) {
            end = file.size;
        }else {
            end = start + chunkSize;
        }
        console.log("本次切割范围:"+start + " " + end);
        tempcell.n = curindex;
        filder[curindex] = new FileReader();
        filder[curindex].readAsText(file.slice(start,end));
        filder[curindex].onload = function() {
            console.log(curindex + "# ")
            tempcell.data = filder[curindex].result;
             myresult.push(tempcell)
        }
        start = end;
        curindex++;
    }
}
function showresult() {
    console.log(myresult);
}

</script>
</html>`

3.结果报错:
图片描述

阅读 4.5k
2 个回答

应该是进行了两次curindex++的原因

新手上路,请多包涵

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题