将文件读取到 blob 并在 javascript 中显示答案

【问题标题】：Read file to blob and display in javascript将文件读取到 blob 并在 javascript 中显示
【发布时间】：2016-06-06 23:46:58
【问题描述】：

所以我正在尝试创建一个功能的基本原型。本质上，最终目标是接收 Base64 编码的字符串和支持的 mime 类型并生成文件并从 HTML 5 APP 提供它。现在我正在做一个简单的获取文件，把它变成一个 Blob，然后显示它，所有这些都来自内存。

   var blobfile = atob(base64);
   window.blobFromBlob = new Blob([binaryString], {
     type: MIMEType
   });
   window.blobURL = URL.createObjectURL(window.blobFromBlob);
   var a = "<a href=\"" + window.blobURL + "\">Binary Blob Link</a>";
   document.getElementById('byte_content').innerHTML = a;

我创建了一个JSFiddle 来显示我遇到的问题。当我将 JPEG 文件放入其中，然后尝试提供它时，img 标签会显示损坏的图像。 Base64 blob 我从没想过可以工作，但我确实希望二进制 blob 和 base 64 的 blob 可以工作。

谁能看出我哪里出错了？

谢谢！

注意：我设法通过将 readAsBinaryString 更改为 readAsArrayBuffer 来显示二进制文件

注意 2：我开始怀疑它与 atob 和 btoa 有关

【问题讨论】：

标签： javascript image pdf blob

【解决方案1】：

因此，如果其他人偶然发现它并发现它很有用，我能够在 this stackoverflow article 的帮助下解决这个问题。该解决方案涉及将readAsBinaryString 保留为文件读取方法。使用btoa 创建Base64 字符串，然后使用mentioned stackoverflow article 中的b64toBlob 函数。

这是调整后的 JSFiddle，展示了我是如何使用它的。

https://jsfiddle.net/ajwhiteway/vstj3bcm/1/

【讨论】：