[JS进阶] JS 之Blob 对象类型

最新推荐文章于 2025-08-19 19:10:10 发布
最新推荐文章于 2025-08-19 19:10:10 发布
阅读量10w+ 收藏 57
点赞数 11
CC 4.0 BY-SA版权
分类专栏： 130-Web语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/36373183

什么是Blob?

Blob 是什么？ 这里说的是一种Javascript的对象类型。

oracle 中也有类似的栏位类型。

在

[JS进阶] HTML5 之文件操作(file)

这一篇中用到了File对象，而实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承。

所以， 在大多数情况下，blob 对象和 file 对象可以用在同一个地方，例如，可以使用 FileReader 借口从 blob 读取数据，也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。



了解本专栏 订阅专栏 解锁全文 超级会员免费看
JavaScript - 判断检查是否为 Blob 对象
🏆 前端领域优质创作者
02-28 9648
前言 对于值类型，你可以通过typeof进行判断，string/number/boolean都很清楚，但是在判断到引用类型的时候，返回值只有object/function，你不知道它到底是一个object对象还是数组，更不知道是newNumber等等。 由于Blob对象也属于Object对象类型，所以不能通过以下方式进行检查： varMyBlob=newBlob(['testtext'],{type:'text/plain'}); console.log(typ
JS宏进阶：XMLHttpRequest对象
jackispy的博客
02-10 1725
XMLHttpRequest简称XHR，它是一个可以在JavaScript中使用的对象，用于在后台与服务器交换数据，实现页面的局部更新，而无需重新加载整个页面，也是Ajax（Asynchronous JavaScript and XML）技术的核心组成部分。通过XHR对象，开发者可以在不干扰用户当前操作的情况下，向服务器请求数据，并动态更新网页内容。XMLHttpRequest对象是一种强大的工具，用于在后台与服务器交换数据，实现页面的局部更新。
Blob.js文件
12-08
浏览器生成文件并下载，IE10以上，FF，chrome均可。 该文件与FileSaver可以一同使用,该文件为自身手动拷贝，自测有效 http://download.csdn.net/download/qq_22697455/10150726
前端 File 与 Blob 深度解析：核心区别与实战应用
excellent_fish_c的博客
08-11 300
Blob是二进制数据的基础载体，专注于“数据内容”，适用于内存中动态生成和处理二进制数据。File是 Blob 的扩展，附加了文件系统元数据，适用于表示用户设备中的真实文件。理解二者的区别后，在文件上传、本地预览、数据转换等场景中，就能精准选择合适的对象，写出更高效、更贴合场景的代码。
JS blob 文件（需要
07-13
浏览器生成文件并下载，IE10以上，FF，chrome均可。
js 中的Blob类型
这里是标题
06-30 5510
js 中的Blob类型 简单记录，以备不时之需，大佬勿喷，多谢！（づ￣3￣）づ╭❤～ Blob 是js 中的一种对象类型，主要用来存取二进制数据的。类似于File对象, File继承自Blob. 主要用途 最主要用途就是构建Blob对象,然后创建对象Url，然后赋值给标签或者使用xhr (XMLHttpRequest)进行下载 分片上传文件 这里主要说的是 File 对象， 因为是继承自Blob， 所以也可以算作是Blob对象特性 上传的例子：（来源于网络） 使用slice属性进行分片上传 function
JS——blob
飞翔的熊blabla
07-26 7260
1、【HTML5】Blob对象 （1）写在前面：本小节主要介绍Blob对象属性及作用，通过demo介绍blob对象的应用场景。 blob对象：一直以来，JS都没有比较好的可以直接处理二进制的方法。而blob的存在，允许我们可以通过js直接操作二进制数据。 “一个blob对象就是一个包含有只读原始数据的类文件对象。blob对象中的数据并不一定得是JavaScript中的原生形式。file接口基于blob，继承了blob的功能，并且扩展支持了用户计算机上的本地文件” Blob对象可以看作是存放二进制
MySQL编程进阶之：`JSON`数据类型与`BLOB`、`TEXT`的性能对比与适用场景。
最新发布
weixin_41455464的博客
08-19 893
JSON格式嘛，相信大家都见过，长得像Python里的字典或者JavaScript里的对象，键值对的那种。在选择数据类型的时候，一定要根据实际的业务场景和需求，综合考虑存储空间、查询性能、数据操作等等因素，才能做出最佳的选择。例如，存储用户扩展信息，用户可能有一些个性化的信息，这些信息不适合放到用户主表中，可以使用。(Binary Large Object) 这位老大哥，啥都能装，二进制数据、图片、视频、压缩包，只要是二进制的，它都照单全收。好了，热身结束，咱们进入正题，开始扒一扒它们的性能和适用场景。
玩转 Blob 构造函数：将 JSON 数据轻松转化为二进制
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
05-07 242
Blob 构造函数是 JavaScript 中的强大工具，它能轻松将 JSON 数据转化为二进制文件，方便存储和传输。通过简单的代码，开发者能够高效地处理数据，让项目更加简洁优雅。
前端提高篇(七十四)：FileReader文件操作及Blob对象，面试提供资料后多久给offer
2401_84140080的博客
04-19 943
File接口基于Blob，继承了Blob的功能（type和size属性）,blob支持截取文件，比如上传一个大视频，会截取成几段再传。//读取具体内容，此处不能写this，指的是btn。，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。onloadend：数据读取完成时触发，不论成功还是失败。
js blob
tsqjxy的博客
08-05 1315
在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。end： 可选，代表的是 Blob 的一个下标，这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。start： 可选，代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。contentType： 可选，给新的 Blob 赋予一个新的文档类型。.
Blob.js文件，前端会用到的
08-06
前端经常会使用到的Blob.js文件，可以把数据转成Blob类型进行处理。
is-blob:检查值是否为Blob
05-26
斑点 检查值是否为不可变的原始数据的类似文件的对象 Blob仅在浏览器中可用。 在Node.js中，它总是返回false 。 安装 $ npm install is-blob 用法 const isBlob = require ( 'is-blob' ) ; isBlob ( new Blob ( [ '<h1>Unicorns</h1>' ] , { type : 'text/html' } ) ) ; //=> true 有关的 -输入检查值
JavaScript之Blob对象类型的具体使用方法
10-15
主要介绍了JavaScript之Blob对象类型的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js blob类型url的视频下载问题的解决
01-19
blob下载问题的详细描述 我想用src url blob:https://www.youtube.com/23aea5c8-9ae2-40dc-9417-e675ea99b386下载视频，但是不知道应该怎么做。 有没有下载这类视频的通用方法？ 推荐的解决方法 我在Vimeo中找到了一个使用blob url下载视频的方法(读了这篇文章，我才知道做法)。我正在使用Google Chrome，具体步骤如下： 1、打开More Tools(更多工具)→Developer Tools(开发工具) 2、检查视频标签中是否有这样的东西： <video preload= src=blob:htt
JavaScript 的Blob 对象详解
爱蹦跶的全栈大A阿
02-22 3496
引言浩瀚的互联网海洋中，数据的传输与存储扮演着至关重要的角色。如何高效、便捷地处理二进制数据，是前端开发人员面临的永恒挑战。问题在传统的 JavaScript 中，处理二进制数据是一项繁琐且容易出错的工作。我们需要使用各种各样的 API 和工具，才能将二进制数据转换为文本、图像、音频等格式。解决方案Blob 对象的出现，为我们带来了新的希望。它提供了一种简单、统一的方式来处理二进制数据，极大地简化了开发人员的工作。本文目标本文旨在深入剖析 Blob 对象，为你揭开它的神秘面纱。
JS中的File（一）：Blob对象详解
weixin_57208584的博客
01-12 1万+
Blob是一个装着二进制数据的容器对象。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成来用于数据操作。
JavaScript 之 Blob 对象类型
热门推荐
_夜渐凉
11-08 5万+
Blob(Binary Large Object)术语最初来自数据库（oracle 中也有类似的栏位类型。），早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。 在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob，并扩展它用于...
blob octet-stream是什么类型
05-28
<think>好的，我现在需要帮助用户理解Blob和application/octet-stream类型，以及如何在JavaScript中处理这些类型的文件。用户之前的问题是关于PDF中的脚本检测，现在转向了文件类型和Blob处理，看起来他们在处理文件下载时遇到了问题，特别是后端返回octet-stream类型时的处理。首先，我需要回顾用户提供的引用内容。引用中提到了使用application/octet-stream类型进行文件下载，前端通过设置responseType为blob来处理二进制流，然后创建Blob对象和下载链接。例如，引用2和3展示了如何通过axios或$http.post请求获取数据，并将其转换为Excel或ZIP文件。用户可能想知道为什么使用这种类型，以及Blob在此过程中的作用。接下来，我需要解释什么是Blob和application/octet-stream类型。Blob是JavaScript中表示二进制数据的对象，而application/octet-stream是一种通用的MIME类型，用于未知的二进制文件。当后端发送文件流时，特别是当文件类型不确定或需要强制下载时，常使用这种类型。然后，如何处理这种类型的文件？用户可能已经看到代码示例，但需要理解背后的原理。例如，设置responseType为'blob'是为了确保正确接收二进制数据，而不是文本。创建Blob对象时指定正确的MIME类型（如application/vnd.ms-excel）可以帮助浏览器识别文件类型，但有时即使使用octet-stream，浏览器也能根据文件内容或下载文件名中的扩展名来正确处理。用户可能还关心如何正确设置文件名，以及处理可能的乱码问题。引用5中的代码展示了如何生成带有时间戳的文件名，并设置正确的MIME类型，避免乱码。此外，释放URL对象内存也是需要注意的细节，防止内存泄漏。还需要指出常见的注意事项，比如跨浏览器兼容性、大文件处理、MIME类型匹配错误等。例如，在IE中可能需要不同的处理方式，或者大文件下载时的内存问题。最后，生成相关问题，帮助用户进一步探索。比如如何检测文件真实类型，处理加密文件，或者分块下载大文件。这些问题可以引导用户更深入地了解文件处理和Blob的应用。</think>### Blob与application/octet-stream类型解析 #### 一、核心概念 1. **Blob对象** - **定义**：JavaScript中表示不可变二进制数据的类文件对象，常用于处理文件流[^2][^3] - **特性**： - 支持切片操作(`slice()`)实现分块传输 - 可转换为`ArrayBuffer`或`DataURL` - 与`File`对象兼容，`File`继承自`Blob` 2. **application/octet-stream** - **MIME类型**：通用二进制流类型，用于未知文件格式或强制下载[^1] - **典型场景**： - 后端无法确定文件类型时 - 需要绕过浏览器自动解析行为时 - 传输加密/压缩的二进制数据[^3] --- #### 二、JavaScript处理流程 ##### 基础操作模板 ```javascript // 1. 发起请求并声明二进制响应类型 fetch('/api/download', { responseType: 'blob' // 关键设置[^2][^4] }) .then(response => response.blob()) .then(blob => { // 2. 创建对象URL const url = URL.createObjectURL(blob); // 3. 创建虚拟下载链接 const a = document.createElement('a'); a.href = url; a.download = 'filename.ext'; // 设置文件名（含扩展名）[^5] // 4. 触发下载 document.body.appendChild(a); a.click(); // 5. 清理内存 URL.revokeObjectURL(url); document.body.removeChild(a); }); ``` ##### 类型处理进阶 ```javascript // 根据实际文件类型修正MIME类型（示例） function fixMimeType(blob, filename) { const ext = filename.split('.').pop(); const mimeMap = { xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', zip: 'application/zip' }; return new Blob([blob], { type: mimeMap[ext] || blob.type }); } ``` --- #### 三、关键问题解决方案 1. **乱码问题** - 确保设置`responseType: 'blob'`[^2] - 显式指定Blob的MIME类型： ```javascript new Blob([data], { type: 'application/vnd.ms-excel' }) // 修正Excel类型[^5] ``` 2. **文件名中文乱码** - 后端需设置`Content-Disposition`头： ```http Content-Disposition: attachment; filename*=UTF-8''%E6%96%87%E4%BB%B6.xlsx ``` 3. **大文件内存优化** ```javascript // 使用流式处理 const reader = response.body.getReader(); while(true) { const { done, value } = await reader.read(); if (done) break; // 分块处理数据 } ``` --- #### 四、数学建模示例 对于二进制流解析，常用位操作公式： $$ \text{字节值} = \sum_{i=0}^{7} b_i \times 2^{7-i} \quad (b_i \in \{0,1\}) $$ 其中$b_i$表示第$i$位的二进制值 --- #### 五、注意事项 1. **跨浏览器兼容性** - IE需使用`msSaveOrOpenBlob`方法： ```javascript navigator.msSaveOrOpenBlob(blob, filename); ``` 2. **内存泄漏防护** - 必须调用`URL.revokeObjectURL()`[^4] 3. **类型误判处理** - 使用`file-type`库检测真实文件类型： ```javascript import { fileTypeFromBlob } from 'file-type'; const type = await fileTypeFromBlob(blob); ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值