Question

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

FileReader

我注意到当图像很大时，方法失败，我无法预览图像我不确定问题是由于base64转换还是{{1}}引起的是否有任何设置来增加最大尺寸，或者有任何解决方法吗？

以下是控制台中抛出的错误消息：

未捕获RangeError：超出最大调用堆栈大小
在FileReader.reader.onloadend

Answer 1

您的问题是您使用Function.apply会将您的Typed Array项目转换为String.fromCharCode方法的参数。

函数have a maximum arguments length limit。

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

如果您需要将文件发送到服务器，只需直接发送Blob，就可以使用FormData API轻松实现。

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

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

Answer 2

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

Answer 3

为我工作：

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)

Answer 4

在这里玩完解决方案后：

 $("#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);
        }
}

FileReader（）无法读取大文件

4 个答案: