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

Question

因此，出于某些原因，我需要使用 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 的引用(或者它可以？)，因为它是字符串。因此，我们在接收 FileReader 结果时遇到了 native 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 中删除。

希望对你有帮助