javascript - Chrome FileReader 为大文件返回空字符串 (>= 300MB)-6ren

javascript - Chrome FileReader 为大文件返回空字符串 (>= 300MB)

转载作者：行者123 更新时间：2023-12-04 03:33:15

24

4

目标:

在浏览器中，从用户文件系统中读取一个文件作为 base64 字符串

这些文件最大为 1.5GB

问题:

以下脚本在 Firefox 上运行良好。不管文件大小。

在 Chrome 上，该脚本适用于较小的文件(我测试了大约 5MB 大小的文件)

如果您选择更大的文件(例如 400MB)，则 FileReader 将在没有错误或异常的情况下完成，但返回一个空字符串而不是 base64 字符串

问题:

这是 Chrome 错误吗？

为什么既没有错误也没有异常？

如何修复或解决此问题？

重要提示:
请注意，分 block 不是一个选项对我来说，因为我需要通过“POST”将完整的 base64 字符串发送到不支持 block 的 API。
代码:

'use strict';

var filePickerElement = document.getElementById('filepicker');

filePickerElement.onchange = (event) => {
  const selectedFile = event.target.files[0];
  console.log('selectedFile', selectedFile);

  readFile(selectedFile);
};

function readFile(selectedFile) {
  console.log('START READING FILE');
  const reader = new FileReader();

  reader.onload = (e) => {
    const fileBase64 = reader.result.toString();

    console.log('ONLOAD','base64', fileBase64);
    
    if (fileBase64 === '') {
      alert('Result string is EMPTY :(');
    } else {
        alert('It worked as expected :)');
    }
  };

  reader.onprogress = (e) => {
    console.log('Progress', ~~((e.loaded / e.total) * 100 ), '%');
  };

  reader.onerror = (err) => {
    console.error('Error reading the file.', err);
  };

  reader.readAsDataURL(selectedFile);
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

  <title>FileReader issue example</title>
</head>

<body>

  <div class="container">
    <h1>FileReader issue example</h1>
    <div class="card">
      <div class="card-header">
        Select File:
      </div>
      <div class="card-body">
        <input type="file" id="filepicker" />
      </div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
    crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>

</html>

最佳答案

Is this a chrome bug?

正如我在回答 Chrome, FileReader API, event.target.result === "" 时所说的那样，这是 V8(Chrome 的但也是 node-js 和其他的 JavaScript JS 引擎)的限制。
这是故意的，因此不能真正称为“错误”。
技术细节是，这里实际上失败的是在 64 位系统上构建超过 512MB(减去 header )的字符串，因为在 V8 中，所有堆对象都必须适合 Smi(小整数)，(参见 this commit)。

Why is there neither an error nor an exception?

那可能是一个错误......正如我在链接答案中所展示的那样，直接创建这样的字符串时我们会得到一个 RangeError :

const header = 24;
const bytes = new Uint8Array( (512 * 1024 * 1024) - header );
let txt = new TextDecoder().decode( bytes );
console.log( txt.length ); // 536870888
txt += "f"; // RangeError

在 FileReader::readOperation 的第 3 步中, UA 必须

If package data threw an exception error:

Set fr’s error to error.

Fire a progress event called error at fr.

但是在这里，我们没有那个错误。

const bytes = Uint32Array.from( { length: 600 * 1024 * 1024 / 4 }, (_) => Math.random() * 0xFFFFFFFF );
const blob = new Blob( [ bytes ] );
const fr = new FileReader();
fr.onerror = console.error;
fr.onload = (evt) => console.log( "success", fr.result.length, fr.error );
fr.readAsDataURL( blob );

我将打开一个关于此的问题，因为您应该能够从 FileReader 处理该错误。

How can I fix or work around this issue?

最好的绝对是让您的 API 端点直接接受二进制资源而不是 data://URL，无论如何都应该避免这种情况。
如果这不可行，那么“ future ”的解决方案是将 POST 一个 ReadableStream 到您的端点，并在来自 Blob 的流上自己进行 data://URL 转换。

class base64StreamEncoder {
  constructor( header ) {
    if( header ) {
      this.header = new TextEncoder().encode( header );
    }
    this.tail = [];
  }
  transform( chunk, controller ) {
    const encoded = this.encode( chunk );
    if( this.header ) {
      controller.enqueue( this.header );
      this.header = null;
    }
    controller.enqueue( encoded );
  }
  encode( bytes ) {
    let binary = Array.from( this.tail )
        .reduce( (bin, byte) => bin + String.fromCharCode( byte ), "" );
    const tail_length = bytes.length % 3;
    const last_index = bytes.length - tail_length;
    this.tail = bytes.subarray( last_index );
    for( let i = 0; i<last_index; i++ ) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    const b64String = window.btoa( binary );
    return new TextEncoder().encode( b64String );
  }
  flush( controller ) {
    // force the encoding of the tail
    controller.enqueue( this.encode( new Uint8Array() ) );
  }
}

实时示例: https://base64streamencoder.glitch.me/
目前，您必须将 base64 表示的 block 存储在 Blob 中，如 Endless 的回答所示。
但是请注意，由于这是 V8 的限制，即使是服务器端也可能会遇到这么大的字符串问题，所以无论如何，您应该联系 API 的维护人员。

关于javascript - Chrome FileReader 为大文件返回空字符串 (>= 300MB)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67483360/

24

4

0

文章推荐： jakarta-ee - 将两个参数传递给命名查询

文章推荐： python - 使用python redis时redis流长度限制不起作用

文章推荐： Ansible 替换单引号正则表达式

java - "Constructor FileReader in class filereader.FileReader cannot be applied to given types"
第一次在这里发帖。我正在编写一个 Java 程序，它接受一个输入文本文件，读取内容，然后将它们打印到屏幕上，同时创建一个包含内容的输出文件。我已经设置了必要的编写器，但是当我尝试使用 Buffere
java - 类 FileReader 中的构造函数 FileReader 不能应用于给定类型；
类 FileReader 中的构造函数 FileReader 不能应用于给定类型； import java.io.*; public class FileReader{ publ
c++ - 对 'FileReader::FileReader()' 的 undefined reference
任何人都可以帮我修复我的代码，以便我可以编译它。当我编译它时，会出现一条错误消息“对‘FileReader::FileReader()’的 undefined reference ”。 #ifnde
java - FileReader 和 ActionListener 之间的同步问题，在我给他任何勇气之前，FileReader 给出了空指针；
这是我的程序。我必须从 JFileChooser 选择一个文件，然后对其执行一些操作。问题是，在我选择文件之前，filereader 给出了 nullpointer ，说实话，我什至无法选择，因为当
java - FileReader 和 BufferedReader 的作用——为什么要 wrapp FileReader？
我无法真正理解 Java 中 FileReader 和 BufferedReader 类的用途。在 docs.oracle 中，建议将缓冲读取器包装在 FileReader 对象周围，因为直接使用
javascript - fileReader.readAsText() 抛出 'FileReader' : parameter 1 is not of type 'Blob'
我正在尝试读取 CSV 或 Excel 文件以将其转换为表格。现在我刚刚创建了一个类来读取输入文件: 输入是: 现在我刚刚创建了一个类来读取输入文件: class InputReader_tiqe
reactjs - FileReader - 如何在商店更新后更新本地状态？
我正在玩弄食物识别 API。我有一个名为 ingredients 的本地状态组件。在组件中，我有一个 input 标签，它接受文件图像上传并调用 cameraHandler 方法 onChange
jquery - FileReader() 无法读取大文件
我正在尝试使用此应用脚本将文件上传到 Google 云端硬盘，它适用于较小的文件，但在上传大于约 1 GB 的文件时失败 + 一旦加载大文件，onerror 函数就会执行。我无法弄清楚如何在切片中读取
javascript - FileReader:对象不是函数
我的代码 - $selectFile = $(''); $selectFile.click(function () { this.value = null; });
JavaScript FileReader 海量结果
我有一个 FileReader，可以让用户将文件(图像)上传到我的网站。这是执行读取的代码: $("input[type='file']").change(function(e) { var
javascript - FileReader 异步读取方法是否会阻塞主线程？
我知道异步方法应该是非阻塞的。但我通常看到它们应用于诸如 fetch() 之类的外部操作。即:在浏览器外部处理的内容。但是 FileReader() API 又如何呢？文件处理是由浏览器完成的，对
javascript filereader 未定义宽度
我有(可能)很容易解决的问题，但我自己无法解决。基本上我的reader.width和reader.height一直说未定义:/..其他一切都按预期工作 function handleFileSelec
javascript - FileReader.onload无法及时返回成功
我想像asp.net一样获取图像文件流并将它们传递到后台，但是每次我尝试触发onload事件时，它总是在编程通过后完成。我尝试使用setTimeout来阻止它并让它处理并等待它成功，但它失败了。下面
java FileReader，逐行读取文本
我有两个类。首先是 TEXT 类:这里我读取了一个 6 行的文本文件。我只想逐行阅读，但这可行。但我想从第三行开始，并跳过最后一行，我只希望以这是文本文件代码。这是文件读取器的代码:
Java，FileReader()似乎只读取文本文档的第一行？
我仍在学习过程中，如果我有误解，请纠正我，但 FileReader 对象不应该返回文本文件的全部内容吗？我这里有一段代码，我简单地尝试获取一个短.txt文件的内容，并使用system.out.pri
java - FileReader 无法读取文件
我收到错误“未处理的异常:java.io.FileNotFoundException，虽然我确定文件路径，但需要一些帮助 public static void main(String[] args)
java - FileReader 似乎不起作用
我有一个我看不到的简单问题，希望另一双眼睛可以帮助我解决。除了我认为的文件阅读器之外，一切都运行良好。我应该让用户输入将其放入文件中，读取该文件并执行正确的操作。但由于某种原因，它只对用户输入的最后一
Java FileReader 编码问题
我尝试使用java.io.FileReader读取一些文本文件并将它们转换为字符串，但我发现结果编码错误并且根本不可读。这是我的环境: Windows 2003，操作系统编码:CP1252 Java
Java FileReader，仅作为读取
在java中使用FileReader方法，使文件只读还是仍然需要声明 FileReader file = new FileReader(args[0]); BufferedReader buff
java - FileReader 未找到文件
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭10 年前。 Improve th

首页

博学

6Ren·AI

商城

javascript - Chrome FileReader 为大文件返回空字符串 (>= 300MB)