JavaScript BLOB 出来的比输入大得多

Question

我们通过拖放变量（使用 dropzone.js - 在此阶段它是 base64 加上用于指定文件类型的字符）来接收本地文件（通常是 PDF、PNG 或 JPG）。我们将它（现在是二进制的）加密到一个 javascript 变量中。然后我们使用该变量创建一个 Blob 并将其上传到运行 PHP 的服务器。（请参阅我们了解如何将 js 变量发送到 PHP $_FILE。）

我们发现 blob 的 .size 比我们上传的文件的 .length 大 50% 左右。（我们一直通过转换为 base64 然后使用 JSON 上传，但我们希望改变的一个原因是希望避免使用 base64 时大小增加 33%。）

从中等尺寸到较大尺寸，斑点始终大约 50%。作为一个小测试，我们使用 120 个字符作为输入创建了一个 Blob，发现 Blob.size 为 210。（我们通常使用正确的 file.type；image/png 只是为了让它被解释为没有的二进制数据）不需要编码。）从我们代码中的实际使用来看：我们上传了一个 900K 的 PDF 文件。类型类似于“应用程序/pdf”。由此产生的 blob 就像 1,400K。也尝试过 PNG。

我认为 Blob 应该与输入的大小相同，不是吗？我们可能做错了什么？

new Blob(["123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"], {type:"image/png"});

Answer 1

有三个因素导致了规模的增加。

我们的第一个问题是我们使用 FileReader 的readAsDataURL读取文件。这会读取一个文件并用 base64 对其进行编码，这导致大小增加了大约 33%。我们改为readAsArrayBuffer并读入一个 Uint8Array（一个 8 位字节的数组）。

我们将文件传递给加密系统 forge.js，它只以字符串形式接收数据，因此我们必须将二进制 ArrayBuffer 转换为字符串。我们在这里使用了性能更高的解决方案。 该参考资料更为详尽，涉及相对较新的 TextEncoder/Decoder API。我们还没有开始使用它们。我猜他们表现得更好，因为他们是纯本地人。

一旦锻造做加密，我们要转换成斑点，所以看到这如何ArrayBuffer转换和斑点。

其次，正如@TechnicalChaos 所指出的，我们在 javascript 中使用了一个二进制字符串。这种编码导致它的大小更大，因为 javascript 中的字符串以 2 个字节字符编码。

然后可以将 blob 附加到要上传到我们的 PHP 服务器到 $_FILE 中的表单。

现在，我们上传的文件大小与我们加密的文件大小大致相同。