输入中带有base64编码图像的POST的Chrome内存泄漏 - 如何解决

Chrome memory leak with POST with base64 encoded image in a input - how to solve?

本文关键字：泄漏 何解决 解决 内存 Chrome base64 编码 POST 图像 输入      更新时间：2023-09-26

因此，出于某些原因，我需要使用 FORM 在输入中发布 base64 编码的图像。图像大小 ~1.1MB，大小 2500x1700。Base64 编码大小 ~1.5MB。

所以我在表单中有两个输入：输入文件和隐藏输入。下载图像到输入隐藏后(使用FileReader将图像转换为base64(，我清除了输入文件值，因此，没有额外的文件。

当我尝试提交表单页面时，冻结并且内存消耗从 50% 增加到 93%(4Gb RAM(，然后 Chrome 崩溃。

当我尝试在Firefox中运行此页面(总是缓慢且滞后(时，我得到了即时发布，没有额外的内存消耗。

当然，我会将其发布到 Chrome 问题，但现在我需要知道：有什么技巧可以避免它吗？好吧，也许我不是第一个发现此错误的人。

好的，所以，如果在FileReader的onload事件中使用input.value = e.target.result，我会得到内存泄漏。如果我将等长的自定义文本设置为input.value，则没有问题。所以，我不认为 e.target.result 可以保存对 FileReader 的引用(或者它可以？(，因为它是字符串。所以我们在接收文件读取器结果时遇到了原生 chrome 问题。

input.addEventListener("change", function() {
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById("input_hidden").value = e.target.result;
  };
  reader.readAsDataURL(this.files[0]);
});

尝试使用不可见的<textarea>而不是input hidden。

它看起来像：

<textarea style="display:none" id="XXX">
$("XXX").value = base64

还要确保完全删除input file，将其保留在表单标记之外，然后将其从 DOM 中删除。

希望这有帮助

相关文章：