Blob

2021-07-17 23:55 JavaScript笔记

图片


1 什么是Blob

Blob是对大数据块的不透明的应用。名字来源于SQL数据库,表示"二进制大数对象"(Binary Large Object)。在JavaScript中,Blob通常表示二进制数据。Blob是不透明的,能对它们的操作有:

  • size 读取大小,以字节为单位
  • type 读取MIME类型
  • slice 方法,分隔成更小的Blob

Blob本身没有多大意思,但它们为JavaScript提供了数据交换机制。

2 构造Blob

语法:

var aBlob = new Blob( array, options );

例如

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

BlobBuilder函数被废弃。

3 文件作为Blob

客户端JavaScript的File对象是Blob的子类,File对象其实就是有名字和修改日期的Blob数据。通过<input type="file">和拖放API可以获取File对象。

<input type="file" onchange="fileinfo(files)" />
<script>
function fileinfo(files) {
for (let index = 0; index < files.length; index++) {
const f = files[index];
console.log(
f.name, // 文件名字,没有路径
f.size, // size 和 type 是Blob属性
f.type,
f.lastModifiedDate // File对象的属性
);
}
}
</script>

4 下载Blob

fetch(myRequest)
.then(function(response) {
if (!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
return response.blob();
})
.then(function(myBlob) {
download(myBlob, 'test.jpg');
})

function download(content, fileName) {
const blob = new Blob([content]);
const a = document.createElement("a");
const url = window.URL.createObjectURL(blob);
const filename = fileName;
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}

5 Blob URL

URL.createObjectURL()将创建一个特殊的Blob或File对象的引用,返回一个普通字符串形式。形如:blob://XXXXXX。注意这个和data://URL 是不一样的。data://URL是会对内容编码的,Blob URL只是对浏览器存储在内存中或磁盘上的Blob的一个简单引用。和file://URL也是不一样的,file://URL直接指向本地文件系统中的一个文件,暴露了文件的路径。

<input type="file" onchange="fileinfo(files)" />
<script>
function fileinfo(files) {
for (let index = 0; index < files.length; index++) {
const f = files[index];
const img = document.createElement('img');
img.src = URL.createObjectURL(f);
img.onload = function () {
this.width = 100;
document.body.appendChild(this);
URL.revokeObjectURL(this.src);
};
}
}

Blob URL和创建它们的脚本拥有同样的源。这使得他们比file://URL更加灵活,由于file://URL是非同源的,在web中使用相对比较麻烦。

6 读取Blob

FileReader对象允许访问Blob中的字符或字节。要使用FileReader,首先要通过FileReader()构造函数创建一个实例。然后定义一个事件处理程序。

<input type="file" onchange="fileinfo(files)" />
<script>
function fileinfo(files) {
for (let index = 0; index < files.length; index++) {
const f = files[index];

const reader = new FileReader();
reader.readAsText(f);
reader.onload = function () {
console.log(reader.result);
};
}
}
</script>

readAsText(blob[, encoding])第二个参数可以指定文本编码方式,如果不传自动采用ASCII和UTF-8文本处理。FileReader还有readAsDataURL方法,生成data://URL。

7 Fetch Api

Fetch Api 并非ES6内容,属于HTML5新增的Web Api。并非取代AJAX,而是对传统AJAX的Api的改进。精细的功能分割:头部信息、请求信息、响应信息等均分布到不同对象。使用Promise Api,更利于异步代码书写。语法:fetch(请求地址字符串, [,请求配置对象])

8 Request 对象

语法:fetch(Request对象)

注意:尽量保证每次请求都是一个新的Request对象,可以通过Request的clone()方法生成新的对象。

var myRequest = new Request('1.jpg');
fetch(myRequest).then(res=>console.log(res))

9 Response 对象

响应对象,从服务器收到消息后会自动构建Response对象。也可以手动创建。

  • ok:boolean,消息码在200~299之间为true,其他为false;
  • status:number,响应状态码
  • text():处理文本格式的Ajax的响应。返回的是一个被解决为String的Promise。
  • blob():处理二进制文件格式的Ajax的响应。返回的是一个被解决为Blob对象的Promise。
  • json():处理JSON格式的Ajax的响应。返回的是一个被解决为JavaScript对象的Promise。
  • redirect():重定向到另一URL。会创建一个新的Promise,解决来自重定向的URL的响应。

10 Headers 对象

在Request和Response对象内部,会将传递的请求头对象,转化为Headers对象。Headers对象中的方法:

  • has(key)
  • get(key)
  • set(key, value)
  • append(key, value) 添加,如果之前有,则有两个值,用逗号分隔。
  • keys() 得到所有请求头中键的可迭代对象
  • values() 得到所有请求头中值的可迭代对象
  • entries() 得到键值对可迭代对象
JavaScript笔记
JavaScript笔记
面向前端开发人员或IT爱好者提供:Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular、求职面试等一系列教程和经验分享。
10篇原创内容
公众号


本文章转载自公众号:gh_203d283b08c7

首页 - JavaScript 相关的更多文章: