将文件读取为 blob 并在 javascript 中显示

Question

所以我正在尝试创建功能的基本原型。本质上，最终目标是接收 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

有关

Answer 1

所以万一其他人偶然发现了这个并发现它有用，我能够在 this Whosebug article. The solution involves leaving readAsBinaryString as the file reading method. Create the Base64 string with btoa and then use b64toBlob function found in the mentioned Whosebug article.

的帮助下解决这个问题

这里是调整后的 JSFiddle，展示了我是如何让它工作的。

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

将文件读取为 blob 并在 javascript 中显示

Read file to blob and display in javascript

javascript

pdf

blob

image