使用带有base64编码图像的POST的Chrome内存泄漏 - 如何解决？

Question

因此,出于某些原因,我需要使用FORM在输入中POST base64编码图像.图像大小~1.1MB,大小2500x1700.Base64编码大小~1.5MB.

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

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

当我试图在Firefox中运行这个页面时(这总是很慢而且有点滞后)我有即时发布,没有额外的内存消耗.

当然,我会将此发布给Chrome问题,但现在我需要知道:有什么技巧可以避免它吗？好吧,也许我不是第一个发现这个bug的人.

---

好吧,如果在FileReader的onload事件中使用input.value = e.target.result,我会得到内存泄漏.如果我将等长自定义文本设置为input.value,则没有问题.所以,我不认为e.target.result可以保存对FileReader的引用(或者它可以？),因为它是字符串.因此,我们在接收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]);
});

Answer 1

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

它看起来像：

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

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

希望这可以帮助