JavaScript文件:(一)Blob

2022-07-24  本文已影响0人  fanren

前言:二进制数据

二进制数据,大家都不陌生,我们从本地或者服务器下载文件之后,获取的数据就是二进制数据;
二进制数据,在iOS开发中,是NSData/Data类型;
那么在JavaScript中呢,二进制数据就是Blob类型;

一、Blob

Blob(Binary Large Object)术语最初来自数据库,早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。
Blob 对象表示一个不可变、原始数据的类文件对象。

我个人认为,Blob对象,就是一个文件对象,通过这个对象,我们可以获取这个文件的一系列其他值,例如文件的地址、文件的Base64等;

二、生成一个Blob对象

1. 构造函数

var blob = new Blob(array[optional], options[optional]);

构造函数,接受两个参数
第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。
第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:
例如:

var blob = new Blob(["Hello World!"],{type:"text/plain"});

2. 转化

可以根据其他类型数据(File)转化成Blob类型

三、Blob对象属性

*size :Blob对象包含的字节数。(只读)
*type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。

四、Blob对象保存到本地

let blob = new Blob(['aaa, bbb']);
let fileName = 'test.text';
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  // IE浏览器
  window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
  // Non-IE (chrome, firefox etc.)
  let url = window.URL.createObjectURL(blob)
  
  var link = document.createElement("a");
  link.href = url;
  link.download = decodeURI(fileName);
  link.click();
  window.URL.revokeObjectURL(link.href);
}
结果

五、Blob对象的实例方法

1. slice

创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。

var blob1 = blob.slice([start [, end [, contentType]]]};
let pblob = new Blob(['aaa, bbb']);
let blob = pblob.slice(2, 7)
结果

2. stream

返回一个ReadableStream对象,读取它将返回包含在Blob中的数据。
例如:

let stream = blob.stream()
截屏

3. text

返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString。

在JavaScript中返回时, USVString 映射到 String
例如:

blob.text().then(result => {
  console.log(result, '----')
})
结果

4. arrayBuffer

返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。
例如:

blob.arrayBuffer().then(result => {
  console.log(result, '----')
})
结果

六、类型转化

通过FileReader,可把Blob对象转化为其他类型(字符串,Base64,ArrayBuffer等)

上一篇下一篇

猜你喜欢

热点阅读