如何使用JavaScript将Blob转换为base64编码?

2021年3月9日16:18:02 发表评论 1,113 次浏览

Blob是JavaScript中的基本数据类型。 Blob代表二进制大对象它是数据字节的表示。 Web浏览器支持Blob数据类型来保存数据。 Blob是文件对象和文件阅读器API。就像普通文件一样, Blob具有特定的大小和文件类型, 可以将其存储并从系统内存中检索。 Blob也可以转换为缓冲液。缓冲区非常便于存储二进制数据, 例如图像或文件的二进制数据。我们将使用文件阅读器将Blob转换为Base64JavaScript中的编码字符串。

我们无法以原始格式通过网络传输二进制数据。这是因为由于网络中涉及的协议不同, 原始字节可能会被错误地解释。在通过网络传输时, 它被破坏的可能性也更高。因此, 该二进制数据使用Base64在通过网络传输之前(例如电子邮件附件, HTML表单数据等)进行编码。Base64编码是一种将任意二进制数据转换为ASCII码字符。使用Base64编码, 因此我们不必依赖Web浏览器中的外部文件和脚本。

例子:Blob转为Base64编码字符串使用文件阅读器API。的FileReader.readAsDataURL()读取指定的Blob数据类型的内容, 并返回Base64编码字符串数据:属性。的FileReader.onloadend当成功完成数据读取或遇到错误时, 将触发事件。我们使用创建了一个示例BlobBlob()构造函数。构造函数在一个串[]和一个由字符串组成的对象类型.

程序:

<!DOCTYPE html>
< html lang = "en" >
  
< head >
     < meta charset = "UTF-8" >
     < title >Convert Blob to Base64 String</ title >
</ head >
  
< body >
< div >Hello lsbin</ div >
< script type = "text/javascript" >
     let blob = new Blob(["lsbin"], { type: "text/plain" });
     // The full Blob Object can be seen 
     // in the Console of the Browser
     console.log('Blob - ', blob);
  
     var reader = new FileReader();
     reader.readAsDataURL(blob);
     reader.onloadend = function () {
     var base64String = reader.result;
     console.log('Base64 String - ', base64String);
  
     // Simply Print the Base64 Encoded String, // without additional data: Attributes.
     console.log('Base64 String without Tags- ', base64String.substr(base64String.indexOf(', ') + 1));
         }
     </ script >
</ body >
</ html >

输出如下:

最终输出

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: