wordpress 站长工具,济南网站优化建设,热搜榜百度,163注册企业邮箱一、定义
Blob是一个装着二进制数据的容器对象。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取#xff0c;也可以转换成 ReadableStream 来用于数据操作。
二、属性
size#xff1a;只读属性#xff0c;Blob中的字节数type也可以转换成 ReadableStream 来用于数据操作。
二、属性
size只读属性Blob中的字节数type只读属性表示Blob存放的媒体类型图片、视频、文本文件等等
三、构造函数
例子
const array [q idaspan idbhey!/span/q]; // 一个包含单个字符串的数组
const blob new Blob(array, { type: text/html }); // 得到 blob构造函数主要有两个参数
参数一存放文件原始数据的可迭代对象一般放数组。数组中可以存放各种类型的文件数据格式例如Buffer、Blob、String等等如下【一般都需要在资源内容外面套个中括号[]】
// Create a new Blob objectvar a new Blob();// Create a 1024-byte ArrayBuffer
// buffer could also come from reading a Filevar buffer new ArrayBuffer(1024);// Create ArrayBufferView objects based on buffervar shorts new Uint16Array(buffer, 512, 128);
var bytes new Uint8Array(buffer, shorts.byteOffset shorts.byteLength);var b new Blob([foobarbazetcetc birdiebirdieboo], {type: text/plain;charsetutf-8});var c new Blob([b, shorts]);var a new Blob([b, c, bytes]);
参数二Optionals可选的配置项其中主要可配置的属性有两个 type同第二大点中属性中的type规定Blob对象文件读取格式endings可选值为transparent 和 native 默认为前者其含义是如果数据是文本如何解析文本中的换行符。默认值 transparent 会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定请指定值 native。
四、常用方法和参数
1、 arrayBuffer()
返回一个 promise会兑现为一个包含 blob 数据以二进制形式的 ArrayBuffer。
2、slice()
使用示例
slice(start, end, contentType)
其中参数start、end代表字节的索引可以为正数也可以为负数如果是负数代表这个偏移量将从末尾往前进行计算例如-10代表Blob的倒数第10个字节。
另外start、end代表是左闭右开区间即end索引指向的字节并不会读取进去
contentType的输入会修改slice生成后新Blob对象中的内容属性type
3、stream()
Blob接口的 stream() 方法返回一个 ReadableStream 对象读取它将返回包含在 Blob 中的数据
4、text()
Blob接口的 text() 方法返回一个 Promise其会兑现一个包含 blob 内容的 UTF-8 格式的字符串。
五、Blob的读取
1、使用FileReader对象读取Blob对象中的文件或数据
构造
let file_readernew FileReader()
指定对Blob的读取方式
file_reader.readAsArrayBuffer(blob)//fileReader中的result保存为读取文件的ArrayBuffer数据对象
file_reader.readAsBinaryString(blob) //result保存为原始二进制数据
file_reader.readAsDataURL(blob) //result保存为格式 data : ${URL格式的Base64字符串}
file_reader.readAsText(blob) //result保存为包含一个字符串以表示所读取的文件内容
定义callBack处理读取到的文件内容
file_reader.onload function (){let resultData file_reader.result//....
}其中onload代表在读取操作成功完成时触发onloadstart代表在读取操作开始的时候触发;onloadend代表读取操作结束时触发失败或成功
另外callback有onerror、onabort、onprogress
终止读取操作
FileReader.abort() //返回的readyState属性为DONE2、使用URL对象读取Blob为指定url格式
相当于加一个url入口来获取本域下Blob对象的资源内容
以利用Blob对象进行图片下载的场景为例
const downloadUrl URL.createObjectURL(blob)const link document.createElement(a)
link.href downloadUrl
link.download image.png
link.style.display none;
document.body.appendChild(link)
link.click()
document.body.removeChild(link);// 释放 URL 对象
URL.revokeObjectURL(link.href)上述代码借助隐藏节点 a元素标签的download属性人为触发点击事件完成下载
