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 >
输出如下:
![最终输出](https://www.lsbin.com/wp-content/uploads/2021/03/Final-Output1.png)