关于javascript：FileReader()无法读取大文件


FileReader() is unable to read large files

我正在使用以下方法在上载图像之前预览图像：

1
2
3
4
5
6
7
8
9
10
11
$("#file").change(function() {
  var reader = new FileReader();
  reader.readAsArrayBuffer(this.files[0]);
  var fileName = this.files[0].name;
  var fileType = this.files[0].type;
  alert(fileType)
  reader.onloadend = function() {
    var base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(this.result)));
    // I show the image now and convert the data to base 64
  }
}

我注意到，当图像较大时，该方法将失败，并且无法预览图像。
我不确定问题是由于base64转换还是FileReader引起的。
是否有任何设置可以增加最大大小，还是可以解决？

这是在控制台中引发的错误消息：

Uncaught RangeError: Maximum call stack size exceeded
at FileReader.reader.onloadend

相关讨论

您的问题是使用Function.apply会将类型数组项转换为String.fromCharCode方法的参数。

函数具有最大参数长度限制。

为避免这种情况，处理大型文件时，最好的方法是根本不处理它。

如果需要将文件发送到服务器，只需直接发送Blob，这可以通过FormData API轻松实现。

如果需要在HTML媒体元素中显示文件，则使用URL.createObjectURL(yourFile)方法。


而且，如果您确实需要文件的dataURI版本，请使用reader.readAsDataURL(yourFile)方法。

相关讨论

为我工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
var reader = new FileReader();

reader.onload = function (evt) {
    var binary = '';
    var bytes = new Uint8Array(reader.result);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    console.log(btoa(binary))
}

reader.readAsArrayBuffer(file)

如果使用FileReader读取文件，则整个文件将被加载到内存中。如果您想处理大文件，这只会导致Web浏览器立即崩溃。如果您真的有兴趣将文件作为Base64 String传递，建议您添加文件大小限制，以防止任何潜在的问题。结论是，FileReader类的任何一种方法都不适合该目的，除非您要处理的文件不大于100MG左右，否则将再次出现问题。

玩完之后，这里是解决方案：

1
2
3
4
5
6
7
8
9
10
 $("#file").change(function () {
        var reader = new FileReader();
        reader.readAsBinaryString(this.files[0]);
        var fileName = this.files[0].name;
        var fileType = this.files[0].type;
        alert(fileType)
        reader.onloadend = function () {
             var base64Image = btoa(this.result);
        }
}

相关讨论