JavaScript | Blob类型

MrLee 2020-5-28 1006

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

最新回复 (0)
返回
站点信息
  • 文章
    2219
  • 用户
    1298
  • 访客
    6784418
每日一句