当前位置： 首页 > news >正文

一篇文章理解前端中的 File 和 Blob

news 2025/12/24 0:05:32

概述： js处理文件、二进制数据和数据转换的时候，提供了一些API和对象，例如：File、Blob、FileReader、ArraryBuffer、Base64、Object URL 和 DataURL。现在主要介绍File和Blob这两个对象。

1.Blob介绍

在js中，Blob（Binary Large Object）对象用于表示不可变的原始二进制数据，主要用于存储文件、图片、视频和音频等各种类型数据。 Blob提供一种高效方式操作数据文件，不需要将数据都加载到内存中，有利于处理二进制数据或大型文件。

可以使用 new Blob() 构造函数创建一个 Blob 对象：

const blob = new Blob(blobParts, options);

  • blobParts: 是一个包含将被放入 Blob 对象中的数据的数组，可以是字符串、数组缓冲区（ArrayBuffer）、TypedArray、Blob 对象等。

  • options: 一个可选的对象，可以设置 type（MIME 类型）和 endings（用于表示换行符）。

例如：

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

Blob 对象主要有以下几个属性：
 

  1.  
    size: 返回 Blob 对象的大小（以字节为单位）。
     
  2.  
    type: 返回 Blob 对象的 MIME 类型。
     
 

 

Blob 对象提供了一些常用的方法来操作二进制数据。
 

例如：slice([start], [end], [contentType])、text()、arrayBuffer() 和 stream()。
 

  1.  
    slice([start], [end], [contentType])
     
    该方法用于从 Blob 中截取一部分数据并返回一个新的 Blob 对象。
     
    参数 start 和 end 表示提取的字节范围，contentType 设置提取部分的 MIME 类型。
     
    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const partialBlob_1 = blob.slice(0, 5, );
const partialBlob_2 = blob.slice(0, 5, "text/plain");
     
     
  2.  
    text()
     
    该方法将 Blob 的内容读取为文本字符串。它返回一个 Promise，解析为文本数据。
     
    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
blob.text().then((text) => {console.log(text); // 输出 "Hello, world!"
});
     
     
  3.  
    arrayBuffer()
     该方法将 Blob 的内容读取为 ArrayBuffer 对象，适合处理二进制数据。
     它返回一个 Promise，解析为 ArrayBuffer 数据。
     
    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
blob.arrayBuffer().then((buffer) => {console.log(buffer);
});
     
     
  4.  
    stream()
     
    该方法将 Blob 的数据作为一个 ReadableStream 返回，允许以流的方式处理数据，适合处理大文件。
     
 

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const stream = blob.stream();
 

 

Blob的应用场景
 

Blob 对象的应用场景很多，尤其是在 前端Web 应用中处理文件、图片或视频等二进制数据时，有以下场景。
 

  1.  
    生成文件下载
     
    通过 Blob 创建文件并生成下载链接供用户下载文件。
     
    const blob = new Blob(["test文件内容"], { type: "text/plain" });
const url = URL.createObjectURL(blob); // 创建一个 Blob URL
const a = document.createElement("a");
a.href = url;
a.download = "test.txt";
a.click();
URL.revokeObjectURL(url); // 销毁 URL 对象
     
    运行代码后会在浏览器中下载一个test.txt的文件

     
  2.  
    上传文件
     通过 FormData 对象将 Blob 作为文件上传到服务器：
     
    const formData = new FormData();
formData.append("file", blob, "example.txt"); //formData.append(name, blob, fileName)
​
fetch("/upload", {method: "POST",body: formData,
}).then((response) => {console.log("文件成功上传了");
});
​
     

     
  3.  
    读取图片或其他文件
     通过 FileReader API 可以将 Blob 对象读取为不同的数据格式。 例如可以将 Blob 读取为图片文件格式。
     
    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="file" id="fileInput" accept="image/*" />
​<div id="imageContainer"></div><script>const fileInput = document.getElementById("fileInput");
​const imageContainer = document.getElementById("imageContainer");fileInput.addEventListener("change", function (event) {const file = event.target.files[0];// startsWith() 方法用于检测字符串是否以指定的子字符串开始。判断是否上传的文件是图片类型if (file && file.type.startsWith("image/")) { const reader = new FileReader();// 读取完成时触发reader.onload = function (e) {// 设置图片样式   const img = document.createElement("img");img.src = e.target.result;img.style.maxWidth = "500px";img.style.margin = "10px";imageContainer.innerHTML = "";imageContainer.appendChild(img);};//获取API异步读取的文件数据，另存为数据URLreader.readAsDataURL(file);} else {alert("请选择一个有效的图片文件。");}});</script></body>
</html>
​
     

     
  4.  
    Blob 和 Base64
     
    有时需要将 Blob 转换为 Base64 编码的数据（例如用于图像的显示或传输）。可以通过 FileReader 来实现。
     
 

const reader = new FileReader();
reader.onloadend = function () {const base64data = reader.result;console.log(base64data); // 输出 base64 编码的数据
};
reader.readAsDataURL(blob); // 将blob读取为dataurl
 

​
 

2.File介绍
 

File 是js中代表文件的数据结构，继承自Blob对象，包含文件的元数据（文件名、文件大小、类型等）。 File 对象可以通过 <input type="file"> 选择文件时创建，也可以使用 js构造函数创建。
 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="file" id="myFileInput" /><script>document.getElementById("myFileInput").addEventListener("change", (event) => {const file = event.target.files[0];console.log("file-->:", file);console.log("文件名:", file.name);console.log("文件类型:", file.type);console.log("文件大小:", file.size);});</script></body>
</html>
​
 

 

也可以使用 File 的方式获取用户上传的文件，手动创建 File 对象：
 

// new File(文件内容,文件名,文件格式)
const file = new File(["Hello, world!"], "hello-world.txt", {type: "text/plain",
});
​
console.log(file);
 

 
 

File 对象继承了 Blob 对象的方法，因此可以使用一些 Blob 对象的方法来。
 

  1.  
    file.slice()
     
    // 获取文件的前 10 个字节
const blob = file.slice(0, 10);
     
  2.  
    file.text()
     
    file.text().then((text) => {// 输出文件的文本内容console.log(text); 
});
     
  3.  
    file.arrayBuffer()
     
    file.arrayBuffer().then((buffer) => {// 输出文件的 ArrayBufferconsole.log(buffer); 
});
​
     
  4.  
    file.stream()
     
    const stream = file.stream();
     
     
 

3.总结
 

Blob 是二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。
 

File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据（如文件名和修改日期），
 

File 对象也就是带有文件信息的 Blob。
 

在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用，而 File 更专注于与文件系统的交互。
 

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
console.log(file instanceof Blob); // true
 















相关文章：
















一篇文章理解前端中的 File 和 Blob




概述&#xff1a; js处理文件、二进制数据和数据转换的时候&#xff0c;提供了一些API和对象&#xff0c;例如&#xff1a;File、Blob、FileReader、ArraryBuffer、Base64、Object URL 和 DataURL。现在主要介绍File和Blob这两个对象。 
1.Blob介绍 
在js中&#xff0c;Blob&am…...






编程日记
2024/11/4 6:56:08



















串口屏控制的自动滑轨（未完工）




序言 疫情期间自己制作了一个自动滑轨&#xff0c;基于无线遥控的&#xff0c;但是整体太大了&#xff0c;非常不方便携带&#xff0c;所以重新设计了一个新的&#xff0c;以2020铝型材做导轨的滑轨&#xff0c;目前2020做滑轨已经很成熟了&#xff0c;配件也都非常便宜&#x…...






编程日记
2024/11/4 6:55:07



















DFA算法实现敏感词过滤




DFA算法实现敏感词过滤 
需求&#xff1a;检测一段文本中是否含有敏感词。 
比如检测一段文本中是否含有&#xff1a;“滚蛋”&#xff0c;“滚蛋吧你”&#xff0c;“有病”&#xff0c; 
可使用的方法有&#xff1a; 
遍历敏感词&#xff0c;判断文本中是否含有这个敏感词。 …...






编程日记
2024/11/4 6:54:07



















Python自动化运维：技能掌握与快速入门指南




#编程小白如何成为大神&#xff1f;大学生的最佳入门攻略# 
在当今快速发展的IT行业中&#xff0c;Python自动化运维已经成为了一个不可或缺的技能。本文将为您详细介绍Python自动化运维所需的技能&#xff0c;并提供快速入门的资源&#xff0c;帮助您迅速掌握这一领域。 
必备…...






编程日记
2024/11/4 6:53:06



















在linux系统中安装pygtftk软件




1.下载和安装 网址&#xff1a; https://dputhier.github.io/pygtftk/index.html  ## 手动安装
git clone http://gitgithub.com:dputhier/pygtftk.git pygtftk
cd pygtftk
# Check your Python version (>3.8,<3.9)
pip install -r requirements.txt
python setup.py in…...






编程日记
2024/11/4 6:52:05



















decodeURIComponentSafe转义%问题记录URI malformed




decodeURIComponentSafe转义%问题记录 问题背景 
当我们解析包涵 % 字符的字符串时&#xff0c;会出现错误如下 Uncaught URIError: URI malformed  
解决方案&#xff1a; 
function decodeURIComponentSafe(s) {if (!s) {return s;}return decodeURIComponent(s.replace(/%(?…...






编程日记
2024/11/4 6:51:04



















自由学习记录（18）




动画事件的碰撞器触发 
Physics 类的常用方法 
RaycastHit hit;
if (Physics.Raycast(origin, direction, out hit, maxDistance)) {Debug.Log("Hit: "  hit.collider.name);
} 
Physics.Raycast&#xff1a;从指定点向某个方向发射射线&#xff0c;检测是否与碰撞体…...






编程日记
2024/11/4 6:49:02



















vue3-ref 和 reactive




文章目录 vue3 中 ref 和 reactivereactive 与 ref 不同之处ref 处理复杂类型ref在dom中的应用 vue3 中 ref 和 reactive 
ref原理 基本原理 ref是Vue 3中用于创建响应式数据的一个函数。它的基本原理是通过Object.defineProperty()&#xff08;在JavaScript的规范中用于定义对…...






编程日记
2024/11/4 6:47:00



















Apache Calcite - 查询优化之自定义优化规则




RelOptRule简介 
为了自定义优化规则&#xff0c;我们需要继承RelOptRule类。org.apache.calcite.plan.RelOptRule 是 Apache Calcite 中的一个抽象类&#xff0c;用于定义优化规则。优化规则是用于匹配查询计划中的特定模式&#xff0c;并将其转换为更优化的形式的逻辑。通过继…...






编程日记
2024/11/4 6:45:58



















大型语言模型（LLM）的小型化研究进展




2024年&#xff0c;大型语言模型&#xff08;LLM&#xff09;的小型化研究取得了显著进展&#xff0c;主要采用以下几种方法实现&#xff1a; 模型融合&#xff1a;通过将多个模型或检查点合并为一个单一模型&#xff0c;减少资源消耗并提升整体性能。例如&#xff0c;《WARM: …...






编程日记
2024/11/4 6:43:56



















MiniWord




1.nuget 下载配置 2.引用 
3. var value = new Dictionary<string, object>()                 {                    ["nianfen"] = nianfen,                     ["yuefen"] = yuefen,                     ["yuefenjian1"] = (int.Par…...






编程日记
2024/11/4 6:42:55



















Netty 常见组件介绍




Netty 常见组件介绍 
上篇文章Netty入门程序echo 基本包含了Netty常见的组件&#xff0c;本文分别介绍各个组件 
Bootstrap or ServerBootstrapEventLoopEventLoopGroupChannelPipelineChannelFuture or ChannelFutureChannelInitializerChannelHandler 
Bootstrap vs ServerBo…...






编程日记
2024/11/4 6:38:52



















高频电子线路---倍频器与振荡器




目录 倍频电路原理 丙类倍频器原理电路 
问题: 
提升滤波方法: 导通角 振荡器 振荡器基本工作原理 
首先是怎么维持 
那么如何振荡呢? 
思考题: 组成要素 振荡器的起振条件 
平衡条件 
要点提示 稳定条件 振幅平衡 硬激励起振时: 稳定条件 相位平衡 倍频电路原理 
简单原理 : …...






编程日记
2024/11/4 6:35:49



















删除 git submodule




直接运行下面命令即可&#xff1a; 
git rm <path-to-submodule>然后提交修改即可。 
但是&#xff0c;还有一个小问题&#xff1a;上面命令只是将 submodule 的代码目录删除了。 
以下痕迹还存在你的仓库中&#xff1a; 
.gitmodule 中关于该 submodule 的信息.git 目录…...






编程日记
2024/11/4 6:32:46



















el-table 多选默认选中（根据返回的id给数据加默认选中状态）




前言 
el-table是我们最常用的展示数据的方式&#xff0c;但是有时候需要用到多选来选择数据&#xff0c;新增数据的时候还好&#xff0c;选中状态都是正常的&#xff0c;但是修改就遇到问题&#xff0c;需要对这个已经选择过的数据加上默认的选中状态&#xff0c;本次就是解决…...






编程日记
2024/11/4 6:30:44



















境外网站翻译之自由职业




Polls Do you use AI tools (e.g ChatGPT, Midjourney, Github Copilot) as part of your work? 
你在工作中会使用人工智能工具&#xff08;如 ChatGPT、Midjourney、Github Copilot&#xff09;吗&#xff1f; 
Yes, as an assistant 
是的&#xff0c;作为一种辅助工具。 Y…...






编程日记
2024/11/4 6:29:43



















批量图片转PDF文件的多种方法详解




要将批量图片转换为PDF文件&#xff0c;可以使用多种方法&#xff0c;包括使用在线工具、桌面应用程序或编程语言。以下是几种常见的方法&#xff1a; 
方法一&#xff1a;使用在线工具 
选择工具&#xff1a;搜索“图片转PDF”在线工具&#xff0c;如 Smallpdf、ILovePDF 等。…...






编程日记
2024/11/4 6:28:42



















Web服务器（理论）




目录 Web服务器www简介常见Web服务程序介绍&#xff1a;服务器主机主要数据浏览器 网址及HTTP简介URLhttp请求方法:2.3 HTTP协议请求的工作流程&#xff1a; www服务器的类型静态网站动态网站 快速安装Apache安装准备工作httpd所需目录主配置文件 nignx安装1、安装2、准备工作 …...






编程日记
2024/11/4 6:26:40



















js:()=＞(,)；()的作用：明确表达式的边界。




()>{表达式1&#xff1b;表达式2&#xff1b;表达式3&#xff1b;... return 结果} 
等同于 
()>(表达式1,表达式2,表达式3,... 结果&#xff09; 
例子&#xff1a; 
const strarr  [a, b, c];const result  strarr.reduce((acc, curr) > {(acc[curr]  1);console.lo…...






编程日记
2024/11/4 6:25:38



















RSI 5G通信技术中用于标识小区的特定参数




RSI是指在5G通信技术中用于标识小区的特定参数&#xff0c;全称为Radio Subframe Indicator&#xff08;无线子帧指示符&#xff09;。在原文的上下文中&#xff0c;RSI被用来确保相邻小区间有足够的间隔&#xff0c;避免由于RSI冲突导致用户设备&#xff08;UE&#xff09;随机…...






编程日记
2024/11/4 6:24:37





















Prompt Tuning、P-Tuning、Prefix Tuning的区别




一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 
1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...






编程新知
2025/12/23 20:37:57



















系统设计 --- MongoDB亿级数据查询优化策略




系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 
使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...






编程新知
2025/11/30 16:55:20



















大语言模型如何处理长文本？常用文本分割技术详解




为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...






编程新知
2025/11/18 0:32:13



















【C语言练习】080. 使用C语言实现简单的数据库操作




080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 
在…...






编程新知
2025/9/22 21:37:01



















（转）什么是DockerCompose?它有什么作用？




一、什么是DockerCompose? 
DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 
Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 
DockerCompose就是把DockerFile转换成指令去运行。 …...






编程新知
2025/12/14 16:13:40



















基于matlab策略迭代和值迭代法的动态规划




经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 
Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...






编程新知
2025/12/7 23:28:25



















初学 pytest 记录




安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd:
# def __init__(self):  在 pytest 中不可以使用__init__方法
#     self.cc  12345
pytest.mark.api
def test_str(self):res  add(1, 2)assert res  12def test_int(self):r…...






编程新知
2025/12/15 0:46:10



















Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？




在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...






编程新知
2025/12/6 10:54:35



















Unity UGUI Button事件流程




场景结构  
测试代码 
public class TestBtn : MonoBehaviour
{void Start(){var btn  GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 
// 实例化一个ButtonClickedEvent的事件
[Formerl…...






编程新知
2025/12/23 17:47:16



















毫米波雷达基础理论（3D+4D）




3D、4D毫米波雷达基础知识及厂商选型 
PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 
1. FMCW毫米波雷达基础知识 
主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w  毫米波雷达基础…...






编程新知
2025/12/23 18:27:11