大文件上的文件阅读器 API

IT技术 javascript html filereader
2021-01-19 22:26:21

到目前为止，我的文件阅读器 api 代码一直运行良好，直到有一天我从我的一位客户那里得到了一个 280MB 的 txt 文件。页面在 Chrome 中直接崩溃，在 Firefox 中没有任何react。

// create new reader object 
var fileReader = new FileReader(); 

// read the file as text 
fileReader.readAsText( $files[i] );  
fileReader.onload = function(e) 
{   // read all the information about the file 
    // do sanity checks here etc... 
    $timeout( function() 
    {    
        // var fileContent = e.target.result;
        // get the first line 
        var firstLine = e.target.result.slice(0, e.target.result.indexOf("\n") ); }}

我在上面尝试做的是获取第一个换行符，以便我可以获得文件的列长度。我不应该把它作为文本阅读吗？如何在不破坏大文件页面的情况下获取文件的列长度？

2个回答

您的应用程序无法处理大文件，因为您在处理之前将整个文件读入内存。这种低效率可以通过流式传输文件（读取小尺寸的块）来解决，因此您只需要将文件的一部分保存在内存中。

AFile对象也是 a 的一个实例Blob，它提供了.slice创建文件较小视图的方法。

这是一个假设输入是 ASCII 的示例（演示：http : //jsfiddle.net/mw99v8d4/）。

function findColumnLength(file, callback) {
    // 1 KB at a time, because we expect that the column will probably small.
    var CHUNK_SIZE = 1024;
    var offset = 0;
    var fr = new FileReader();
    fr.onload = function() {
        var view = new Uint8Array(fr.result);
        for (var i = 0; i < view.length; ++i) {
            if (view[i] === 10 || view[i] === 13) {
                // \n = 10 and \r = 13
                // column length = offset + position of \r or \n
                callback(offset + i);
                return;
            }
        }
        // \r or \n not found, continue seeking.
        offset += CHUNK_SIZE;
        seek();
    };
    fr.onerror = function() {
        // Cannot read file... Do something, e.g. assume column size = 0.
        callback(0);
    };
    seek();

    function seek() {
        if (offset >= file.size) {
            // No \r or \n found. The column size is equal to the full
            // file size
            callback(file.size);
            return;
        }
        var slice = file.slice(offset, offset + CHUNK_SIZE);
        fr.readAsArrayBuffer(slice);
    }
}

前面的代码段计算换行前的字节数。计算由多字节字符组成的文本中的字符数稍微困难一些，因为您必须考虑块中的最后一个字节可能是多字节字符的一部分的可能性。

@RobW 我们如何逐块预览大图像？如果每个图像大小 > 25mb，显示的总多张图像大小约为 900mb？我们如何在 img src 上按块视图设置块？
2021-03-23 22:26:21
如果我需要确定文件中的最后一个块，您有什么建议？我正在使用的系统的最后一个块有一个不同的 REST api，然后提交整个文件。但我不知道如何确定最后一块。如果你不介意看我的问题会很有帮助stackoverflow.com/questions/39312451/...
2021-03-29 22:26:21
我想知道如何使用它从大文件中读取n行.....：/
2021-03-31 22:26:21
你是我的英雄。起初，我有同样的想法，将它作为一个 blob 块来阅读，而不是阅读整个内容，但我知道的不够多，无法让它工作。你不知道我有多欣赏这一点。谢谢！
2021-04-05 22:26:21
至于多字节字符困境，TextDecoder#decode now/soon 有一个stream用于此目的的选项标志。
2021-04-12 22:26:21

有一个很棒的库叫做Papa Parse，它以优雅的方式做到这一点！它真的可以处理大文件，你也可以使用 web worker。

只需尝试他们提供的演示：https : //www.papaparse.com/demo

每当您想直接在浏览器中处理 CSV 文件而不是将其发送到后端时，这都会很有帮助。
2021-03-29 22:26:21
CSV 解析器？这有帮助吗？
2021-04-03 22:26:21
其它你可能感兴趣的问题
上一篇$.each() 与 for() 循环 - 和性能 下一篇如何在 JavaScript 中禁用右键单击上下文菜单