JavaScript | Blob类型-Article-IT72.COM

JavaScript | Blob类型

Home / Article MrLee 2020-5-28 2293

Blob是一组字节对象，用于保存文件中存储的数据。似乎blob是对实际文件的引用，但实际上不是。blob的大小和MIME就像一个简单文件一样。根据浏览器的功能和Blob的大小，blob数据存储在用户的内存或文件系统中。一个简单的Blob可以像文件一样在任何我们希望使用的地方使用。

Blob的内容可以很容易地读取为ArrayBuffer，这使Blob非常方便地存储二进制数据。

创建Blob的语法：

var abc = new Blob(["Blob Content"], 
    {type: Blob Property containing MIME property})

除了直接将数据插入Blob外，我们还可以使用FileReader类从该Blob中读取数据：

var abc = new Blob(["Hello,JavaScript"], 
				{type : "text/plain"}); 
var def = new FileReader(); 
def.addEventListener("loadend", function(e) { 
	document.getElementById("para").innerHTML 
					= e.srcElement.result; 
}); 
def.readAsText(abc);

在HTML文件中，我们只创建一个简单的<p>元素，其id为“test”：

<p id="test"></p>

您将获得以下输出：Hello,JavaScript

Blob URL：就像我们有引用本地文件系统中某些实际文件的文件URL一样，我们也有引用Blob的Blob URL。Blob URL与任何常规URL都非常相似，因此几乎可以在我们可以使用常规URL的任何地方使用。Blob可以轻松用作<a>，<img>或其他标签的URL，以显示其内容。指向blob的blob URL可以使用createObjectURL对象获得：

<!DOCTYPE html> 
<html> 
<head> 
	<title> 
		JavaScript Blob 
	</title> 
</head> 
<body> 
	<a download="test.txt" href='#'
		id="link">Download</a> 
	<script> 
		let abc = new Blob(["Hello,JavaScript"], 
				{ type: 'text/plain' }); 
		link.href = URL.createObjectURL(abc); 
	</script> 
</body> 
</html>

输出：

您将获得一个下载的动态生成的Blob，其中包含Geeks For Geeks作为其内容：

Blob到ArrayBuffer： Blob构造函数可用于从任何内容（包括任何类型的BufferSource）创建blob。对于低级处理，我们可以使用FileReader使用blob中最低级别的ArrayBuffer：

let def = new FileReader(); 
def.readAsArrayBuffer(abc); 
def.onload = function(event) { 
	let res = def.result; 
};

使用Blob的积极点：

Blob是将大型二进制数据文件添加到数据库的一个不错的选择，并且可以轻松地进行引用。

使用Blob时，可以使用权限管理轻松设置访问权限。

Blob的数据库备份包含所有数据。

使用Blob的负点：

并非所有数据库都允许使用Blob。

由于所需的磁盘空间量和访问时间，Blob效率很低。

由于Blob的文件大小，创建备份非常耗时。

本文链接:https://www.it72.com/12632.htm