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

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

news 2026/3/28 12:23:41

概述： 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





















Python代码秒变Linux原生二进制：手把手带你用2026最新toolchain完成AOT编译（含交叉编译Windows/Mac/LoongArch三平台完整脚本）




第一章&#xff1a;Python代码秒变Linux原生二进制&#xff1a;手把手带你用2026最新toolchain完成AOT编译&#xff08;含交叉编译Windows/Mac/LoongArch三平台完整脚本&#xff09; Python长期受限于CPython解释器与GIL&#xff0c;难以直接生成真正独立、零依赖的原生可执行文…...






编程新知
2026/3/28 11:11:16



















利用快马平台与免费Python源码，十分钟搭建个人博客原型




最近想快速验证一个个人博客的想法&#xff0c;但自己从头写代码太费时间。偶然发现InsCode(快马)平台这个神器&#xff0c;配合网上丰富的免费Python源码资源&#xff0c;居然十分钟就搭出了可运行的博客原型。记录下这个超高效的验证过程&#xff1a; 需求明确化 先梳理最基础…...






编程新知
2026/3/28 11:05:15



















Mac视频预览增强工具：解决MKV文件无法预览问题的全方位方案




Mac视频预览增强工具&#xff1a;解决MKV文件无法预览问题的全方位方案 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files.   项目地址: https://g…...






编程新知
2026/3/28 10:57:06



















驱动级输入模拟技术：突破Windows系统限制的Interceptor解决方案




驱动级输入模拟技术&#xff1a;突破Windows系统限制的Interceptor解决方案 【免费下载链接】Interceptor C# wrapper for a Windows keyboard driver. Can simulate keystrokes and mouse clicks in protected areas like the Windows logon screen (and yes, even in games).…...






编程新知
2026/3/28 10:47:03



















Phi-4-Reasoning-Vision一文详解：官方Prompt规范与本地适配实践




Phi-4-Reasoning-Vision一文详解&#xff1a;官方Prompt规范与本地适配实践 
1. 项目概述 
Phi-4-Reasoning-Vision是基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具&#xff0c;专为双卡4090环境优化。该工具严格遵循官方SYSTEM PROMPT规范&#xff0c;…...






编程新知
2026/3/28 10:06:41



















别再只盯着准确率了！手把手教你用Python实现NDCG和MAP，搞定搜索推荐系统评估




别再只盯着准确率了&#xff01;手把手教你用Python实现NDCG和MAP&#xff0c;搞定搜索推荐系统评估
当你在优化推荐算法时&#xff0c;是否曾为选择评估指标而纠结&#xff1f;准确率、召回率这些传统指标虽然直观&#xff0c;却无法捕捉排序质量这一关键维度。本文将带你深入…...






编程新知
2026/3/28 7:29:15



















Kaggle Notebook中文乱码终结者：3分钟搞定Matplotlib字体配置（附Noto Sans CJK全流程）




Kaggle Notebook中文乱码终结者&#xff1a;3分钟搞定Matplotlib字体配置&#xff08;附Noto Sans CJK全流程&#xff09;
在数据可视化过程中&#xff0c;中文显示问题一直是困扰许多Kaggle用户的痛点。当你在Notebook中满怀期待地运行代码&#xff0c;却发现图表中的中文变成…...






编程新知
2026/3/28 6:56:53



















家庭实验室：树莓派控制OpenClaw调用远程Qwen3-32B




家庭实验室&#xff1a;树莓派控制OpenClaw调用远程Qwen3-32B 
1. 为什么选择树莓派OpenClaw组合 
去年冬天&#xff0c;我在整理家庭实验室设备时发现一个闲置的树莓派4B。这台信用卡大小的电脑曾经用来跑Home Assistant控制智能家居&#xff0c;但后来换了NUC主机就被束之高阁…...






编程新知
2026/3/28 4:52:05



















避免踩坑：Unity中Resources.LoadAll的正确使用姿势（含multiple模式Sprite处理）




Unity资源加载进阶&#xff1a;Resources.LoadAll与Sprite图集高效处理指南
在Unity开发中&#xff0c;资源加载是每个项目都无法绕开的核心环节。特别是当处理包含多张小图的Sprite图集时&#xff0c;很多开发者会陷入性能陷阱和功能误区。本文将深入剖析Resources.LoadAll的正…...






编程新知
2026/3/28 4:19:55



















短剧小程序源码：打造你的专属短剧平台




温馨提示&#xff1a;文末有资源合作获取方式&#xff5e;一、市场前景&#xff1a;千亿蓝海&#xff0c;风口正当时“昨晚又为一部短剧熬夜了&#xff01;”这已成为当代年轻人的日常。3分钟一集&#xff0c;连续反转&#xff0c;极致爽点——短剧正以惊人的速度占领我们的碎片…...






编程新知
2026/3/28 3:05:12