javascript - 完全等待 FileReader 切片 blob

Question

我正在尝试使用 FileReader API 读取文件数据，并且我阅读了很多与此相同的问题的问题，并尝试实现他们的解决方案，但是对于我的代码中的一些错误(也许)，它一直在执行错误的结果。为了避免当文件太大(超过 15MB)时浏览器崩溃，我决定开始使用“切片”方法。但问题是，由于 FileReader onload 事件是异步的，我得到了代码部分，它应该很快就准备好完成的缓冲区，但它仍然不完整。我无法在 onload 事件中制作所有内容，因为它只有总缓冲区的一部分。这是我的代码:

function readBlob(opt_startByte, opt_stopByte) 
{
    var file = window.files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onload = function(evt) {           
        window.bits.push(CryptoJS.AES.encrypt(evt.target.result, window.password)); 
    };
    var blob = file.slice(start, stop + 1);
    reader.readAsDataURL(blob);
}

function encrypt()
{
    window.files = document.getElementById('encrypt-input').files;
    if (!window.files.length) {
        alert('Please select a file!');
        return;
    }
    window.password = $('#key').val();
    window.bits = [];
    var startByte = 0;              
    var endByte = 0;
    while(startByte <= document.querySelector('input[type=file]').files[0].size - 1)
    {       
        endByte = startByte + 1024;
        readBlob(startByte, endByte);
        startByte = endByte;
        if (startByte >= document.querySelector('input[type=file]').files[0].size)
        {
            alert('Here I want the total array length:' + window.bits.length);      
        }   
    }   
            alert('Here I want the total array length:' + window.bits.length);          
}

正如你在上面看到的，我尝试了这个:

    if (startByte >= document.querySelector('input[type=file]').files[0].size)
    {
        alert('Here I want the total array length:' + window.bits.length);      
    }   

但由于某种原因我仍然得到长度0。使用切片方法时如何处理整个缓冲区？另一个次要问题是:在 onload 事件中，我调用同步函数“CryptoJS.AES.encrypt”，但由于此事件是异步的，我预计浏览器在将缓冲区处理到此事件中时不会卡住。有什么方法可以实现一些避免在处理文件时卡住浏览器的方法？

Answer 1

看来您需要以“同步方式”来做到这一点。您可以在此处找到文档 -> http://www.w3.org/TR/FileAPI/#FileReaderSync 。 我还发现了这个库 - FileReader.js (http://bgrins.github.io/filereader.js/)，它不仅让您在使用 FileReader 时变得更加轻松，而且还已经内置了使用同步方法同步读取文件的选项。 很抱歉现在无法发布一些示例代码!无论如何，希望它有所帮助!