首页 前端知识 JS中的File(一):Blob对象详解

JS中的File(一):Blob对象详解

2024-06-24 23:06:28 前端知识 前端哥 191 885 我要收藏

一、定义

Blob是一个装着二进制数据的容器对象。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

二、属性

  • size:只读属性,Blob中的字节数
  • type:只读属性,表示Blob存放的媒体类型,图片、视频、文本文件等等

三、构造函数

例子:

const array = ['<q id="a"><span id="b">hey!</span></q>']; // 一个包含单个字符串的数组
const blob = new Blob(array, { type: "text/html" }); // 得到 blob

构造函数主要有两个参数:

  • 参数一:存放文件原始数据的可迭代对象,一般放数组。数组中可以存放各种类型的文件数据格式,例如Buffer、Blob、String等等,如下:【一般都需要在资源内容外面套个中括号[]
// Create a new Blob object

var a = new Blob();

// Create a 1024-byte ArrayBuffer
// buffer could also come from reading a File

var buffer = new ArrayBuffer(1024);

// Create ArrayBufferView objects based on buffer

var shorts = new Uint16Array(buffer, 512, 128);
var bytes = new Uint8Array(buffer, shorts.byteOffset + shorts.byteLength);

var b = new Blob(["foobarbazetcetc" + "birdiebirdieboo"], {type: "text/plain;charset=utf-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_reader=new 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属性为DONE

2、使用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属性,人为触发点击事件,完成下载

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13475.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!