使用JavaScript的FileReader处理大文件

Question

我在使用JavaScript的FileRead尝试读取大文件时遇到了问题。

比如说，我有一个200MB的文本文件，每次读取这个文件时代码都会停止工作。

有可能只读取前10行或在读取10MB后停止读取吗？

以下是我的代码：

var file = form.getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();

reader.onload = (function(theFile) {
                return function(e) {
                    data = e.target.result;
                    form.displayedData=data;
                };
            })(file);

reader.readAsText(file);

e.target.result 总是包含文件的全部数据。

我应该在这里做些什么？

谢谢。

- ssamuel68

Answer 1

这将只会读取前 10 MB：

var file = form.getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();

reader.onload = function(e) {
    var data = e.target.result;
    form.displayedData = data;
};

reader.readAsText(file.slice(0, 10 * 1024 * 1024));

- Esailija

---

是的，这个程序读取了前10MB，但文件仍然在内存中，我认为最初的问题是关于读取大文件而不是将整个文件加载到内存中。我没错吧？ - Yetti

是的，@Yetti，我的问题也一样。如果我们尝试打开 4GB 的文件，file.slice 将会尝试加载整个文件。 - Fatih

@Yetti 不，它只会加载10MB到内存中。 - Esailija

@Fatih Blob.slice（与File.slice相同）不应将整个文件加载到内存中，如果您只通过切片读取，则基本上是真正的文件流式传输（尽管实际的底层行为因浏览器和系统而异，例如，在64GB RAM系统上可能会将200MB的文件加载到内存中，但不会加载20GB的文件）。相关链接：https://dev59.com/zmAf5IYBdhLWcg3wSQ4z 和 https://chromium.googlesource.com/chromium/src/+/master/storage/browser/blob/README.md - John Weisz

谢谢@JohnWeisz，我会尝试的。 - Fatih