百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

浅谈JavaScript中Blob对象(js blob对象)

ztj100 2025-07-09 18:37 3 浏览 0 评论

浅谈JavaScript中Blob对象

大纲

本文大纲如下,都了解的同学可以跳过啦!

概念

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

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob,继承了 blob 的功能并将其扩展以支持用户系统上的文件。

上述内容来自于 MDN-Blob[1]

构造函数

Blob() 构造函数返回一个新的 Blob 对象。

语法

new Blob(blobParts);
new Blob(blobParts, options);

参数

  • blobParts
    一个
    可迭代对象,比如 Array,包含 ArrayBuffer、TypedArray、DataView、Blob、字符串或者任意这些元素的混合,这些元素将会被放入 Blob 中。字符串应该是格式良好的 Unicode。
  • options
    一个对象,包含以下属性:
    type:可选。一个MIME格式字符串,表示 Blob 的内容类型。
    endings:可选。一个枚举值,表示 Blob 中数据的处理方式。如果数据是文本,那么如何解释其中的换行符(\n)。默认值 transparent 会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定,请指定值 native。

Blob实例属性

  • size
    只读。 Blob 对象的字节数。
  • type
    只读。 Blob 对象的 MIME 类型。

Blob实例方法

  • slice()
    返回一个新的 Blob 对象,该对象包含源 Blob 对象的指定部分。
  • stream()
    返回一个包含 Blob 中数据的
    可读流(ReadableStream)。
  • text()
    返回一个 Promise,该 Promise 会在 Blob 中包含的
    文本完成读取后 resolve。
  • arrayBuffer()
    返回一个 Promise,该 Promise 会在 Blob 中包含的
    ArrayBuffer 读取后 resolve。
  • bytes()
    返回一个 Promise,该 Promise 会在 Blob 中包含的
    Uint8Array读取后 resolve。支持该方法的浏览器较少。
let blob = new Blob(["你好,世界!"], {type: "text/plain"});
// 输出:Blob {size: 18, type: "text/plain"}
// 一个中文字占三个字节,所以 size 为 18
console.log(blob)
// slice() 方法返回一个新的 Blob 对象,该对象包含从 start 到 end(不包括 end 本身)的所有内容。
let newBlob = blob.slice(0, 6);
// text() 方法返回一个 Promise,为包含 Blob 内容的字符串。
// 输出:你好
newBlob.text().then(txt => console.log(txt))
// bytes() 方法返回一个Promise,包含 Blob 内容的 Uint8Array。目前Chrome浏览器不支持此方法。
newBlob?.bytes && newBlob.bytes().then(bytes => console.log(bytes))
// arrayBuffer() 方法返回一个 Promise,包含 Blob 内容的 ArrayBuffer。
newBlob.arrayBuffer().then(buffer => {
    // ArrayBuffer [228,189,160,229,165,189]
    console.log(buffer);
    // 输出:你好
    console.log(new TextDecoder().decode(buffer))
})
async function readBlobByStream(){
    // stream() 方法返回一个包含 Blob 内容的 ReadableStream 对象。以下代码用迭代的方式读取 ReadableStream 内容。
    for await (let chunk of newBlob.stream()){
        // Uint8Array [228,189,160,229,165,189]
        console.log('chunk',chunk);
        // 输出:你好
        console.log('chunk.text',new TextDecoder().decode(chunk));
    }
}
readBlobByStream();

获取及创建

上述代码已经展示了通过构造函数及Blob.slice对象创建Blob对象,下面介绍通过fetch获取远程文件创建Blob对象。

通过fetch获取远程文件创建

fetch API 可以很方便的设置响应,以blob方式返回。

fetch('./demo.txt').then(response => response.blob()).then(blob => {
    // Blob {size: 20, type: "text/plain"}
    console.log(blob);
    // 输出:你好,世界!
    blob.text().then(txt => console.log(txt))
});

类似的,也可以通过设置XMLHttpRequest的responseType设置为blob,也可以获取blob对象。其他ajax库可以参考文档设置。

从Blob中提取数据

上文展示了通过Blob.text()方法获取数据,下面介绍通过FileReader对象或Response对象来读取。

FileReader

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

let blob = new Blob(["你好,世界!"], {type: "text/plain"});
let reader = new FileReader();
reader.onload = function(e) {
    // 输出:你好,世界!
    console.log(reader.result);
}
reader.readAsText(blob);

Response

利用blob手动构建一个 Response 对象,通过Response也可以读取。

let blob = new Blob(["你好,世界!"], {type: "text/plain"});
let response = new Response(blob);
// 输出:你好,世界!
response.text().then(txt => console.log(txt));

Blob URLs

Blob URLs(Blob URLs)是一种特殊类型的 URL,用于访问 Blob 对象。

如果用浏览器打开本地文件,你会发现 url 是以 “file://“ 开头的, 一个 file:// URL 引用了本地文件系统中的一个真实文件。

类似的,一个 blob:// URL 指向一个Blob对象。

几乎所有可以使用 urls 的地方都可以使用 blob:// URLs。

我们需要用createObjectURL对象来为一个blob创建一个url。

URL.createObjectURL()静态方法会创建一个DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的document绑定。这个新的URL 对象表示指定的File对象或Blob对象。

fetch('./assets/363.png').then(response=>response.blob()).then(blob=>{
    let url = URL.createObjectURL(blob);
    let img = document.createElement('img');
    img.src = url;
    img.onload=()=>{
        // 释放内存,养成一个好习惯,用完就释放掉。当然,网页销毁时,也会自动释放,但为了避免内存泄漏,还是建议用完就释放。
        URL.revokeObjectURL(url);
    }
    document.body.appendChild(img)
})

引用链接

[1] MDN-Blob: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

相关推荐

前端案例·程序员的浪漫:流星雨背景

如果文章对你有收获,还请不要吝啬【点赞收藏评论】三连哦,你的鼓励将是我成长助力之一!谢谢!(1)方式1:简单版本【1】先看实现效果...

UI样式iPod classic的HTML本地音乐播放器框架

PS:音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...

JavaScript 强制回流问题及优化方案

JavaScript代码在运行过程中可能会强制触发浏览器的回流(Reflow)...

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

最近Ai火的同时,Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor,使用免费版本搞一个零基础教程...

19年前司机被沉尸水库!凶手落网,竟已是身家千万的大老板

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

全民健身网络热度调查“居家健身”成为第一网络热词

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

取代JavaScript库的10个现代Web API及详细实施代码

为什么浏览器内置的API你还在用某个臃肿的Javascript库呢?用内置的API有什么好处呢?Web平台经历了巨大演进,引入了强大的原生API,不再需要臃肿的JavaScript库。现代浏览器现已支...

前端文件下载的N种姿势:从简单到高级

文件下载是web开发里一个非常常见的功能,无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求,每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...

JavaScript 性能优化方法(js前端性能优化)

JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流,影响性能。使用文档片段(DocumentFragment)或虚拟DOM技术减少直接操作。...

DOM节点的创建、插入、删除、查找、替换

在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...

前端里的拖拖拽拽(拖拽式前端框架)

最近在项目中使用了react-dnd,一个基于HTML5的拖拽库,“拖拽能力”丰富了前端的交互方式,基于拖拽能力,会扩展各种各样的拖拽反馈效果,因此有必要学习了解,最好的学习方式就是实操!...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...

SSE前端(sse前端数据)

<!DOCTYPEhtml><htmllang="zh-CN"><head>...

课堂点名总尴尬?试试 DeepSeek,或能实现点名自由!(附教程)

2025年2月26日"你有没有经历过这样的场景?老师拿着花名册扫视全班:'今天我们来点名...'那一刻心跳加速,默念:'别点我!'但现在,我要...

我会在每个项目中复制这10个JS代码片段

你是否也有这种感觉:在搭建新项目时,你会想:"这个函数我是不是已经写过了...在某个地方?"是的——我也是。所以在开发了数十个React、Node和全栈应用后,我不再重复造轮子。我创建...

取消回复欢迎 发表评论: