将文件读取到 blob 并以 JavaScript 格式显示

Read file to blob and display in javascript

本文关键字：JavaScript 格式 显示 并以 blob 文件 读取      更新时间：2023-09-26

所以我正在尝试创建一个功能的基本原型。从本质上讲，最终目标是接收 Base64 编码字符串和支持 mime 类型，并生成文件并从 HTML 5 应用程序提供它。现在，我正在简单地获取一个文件，将其转换为 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

有关
因此，

如果其他人偶然发现这一点并发现它很有用，我能够在这篇 stackoverflow 文章的帮助下解决这个问题。解决方案涉及将readAsBinaryString保留为文件读取方法。使用 btoa 创建 Base64 字符串b64toBlob然后使用上述堆栈溢出文章中的函数。

这是调整后的 JSFiddle，以显示我是如何让它工作的。

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

相关文章：