JavaScript中的 File 和 Blob对象

最新推荐文章于 2025-06-27 09:02:11 发布
最新推荐文章于 2025-06-27 09:02:11 发布
阅读量1.1k 收藏 12
点赞数 21
CC 4.0 BY-SA版权
文章标签： javascript 学习 linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43909743/article/details/144979465

前言

在 JavaScript 中，File 和 Blob 是 Web API 提供的两个重要对象，用于处理文件和二进制数据。它们被广泛应用于文件上传、下载、读取以及数据操作等场景。

blob

Blob 对象表示一个不可变的、原始数据的类文件对象。它提供了对文件内容的抽象，而不关心具体内容本身。你可以使用 Blob 来存储二进制数据。可以用来存储文件、图片、音频、视频、甚至是纯文本等各种类型的数据。Blob 提供了一种高效的方式来操作数据文件，而不需要将数据全部加载到内存中，这在处理大型文件或二进制数据时非常有用。

const blob = new Blob(blobParts, options);

blobParts: 一个数组，包含将被放入 Blob 对象中的数据，可以是字符串、数组缓冲区（ArrayBuffer）、TypedArray、Blob 对象等。
options: 一个可选的对象，可以设置 type（MIME 类型）和 endings（用于表示换行符）。

// 创建一个包含文本的 Blob
const textBlob = new Blob(["Hello, Blob!"], { type: "text/plain" });
console.log(textBlob); // Blob { size: 12, type: "text/plain" }

// 创建一个包含二进制数据的 Blob
const binaryBlob = new Blob([new Uint8Array([72, 101, 108, 108, 111])], { type: "application/octet-stream" });
console.log(binaryBlob); // Blob { size: 5, type: "application/octet-stream" }

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

	size: 返回 Blob 对象的大小（以字节为单位）。
		console.log(blob.size); // 输出 Blob 的大小
	type: 返回 Blob 对象的 MIME 类型。
		console.log(blob.type); // 输出 Blob 的 MIME 类型

Blob 对象提供了一些常用的方法来操作二进制数据。
1、slice([start], [end], [contentType])

该方法用于从 Blob 中提取一部分数据，并返回一个新的 Blob 对象。
参数 start 和 end 表示提取的字节范围，contentType 设置提取部分的 MIME 类型。

const blob = new Blob(["Hello, Blob!"], { type: "text/plain" });
const partialBlob = blob.slice(0, 5);

2、text()

该方法将 Blob 的内容读取为文本字符串。它返回一个 Promise，解析为文本数据。

blob.text().then((text) => {
  console.log(text); // 输出 "Hello, Blob!"
});

3、arrayBuffer()

该方法将 Blob 的内容读取为 ArrayBuffer 对象，适合处理二进制数据。它返回一个 Promise，解析为 ArrayBuffer 数据。

const blob = new Blob(["Hello, Blob!"], { type: "text/plain" });
blob.arrayBuffer().then((buffer) => {
  console.log(buffer);
});

在这里插入图片描述
ArrayBuffer 的实际应用：图片预览

const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  
  file.arrayBuffer().then((arrayBuffer) => {
    const blob = new Blob([arrayBuffer], { type: file.type });
    const objectURL = URL.createObjectURL(blob);
    
    const img = document.createElement('img');
    img.src = objectURL;
    document.body.appendChild(img);
    
    URL.revokeObjectURL(objectURL); // 释放资源
  });
});

4、stream()

stream() 是 Blob 对象的一个方法，用于将 Blob 的数据作为一个 ReadableStream 返回。这种方式允许以流的方式逐块读取数据，非常适合处理 大文件，避免一次性加载整个文件到内存中，节约资源。

const readableStream = blob.stream();
// 返回值: 一个 ReadableStream，用于逐步读取 Blob 的内容。
// 用途:
// 处理大文件的流式传输。
// 避免大文件占用大量内存。

示例1、使用 ReadableStream 读取数据块

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

const reader = blob.stream().getReader(); // 获取流的 reader

reader.read().then(function process({ done, value }) {
  if (done) {
    console.log('Stream complete');
    return;
  }

  console.log(new TextDecoder().decode(value)); // 解码并打印每块数据
  return reader.read().then(process); // 继续读取下一块数据
});

示例2、流式上传文件

const uploadFile = async (file) => {
  const reader = file.stream().getReader();

  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      console.log('File upload complete');
      break;
    }
    // 将每块数据上传到服务器
    await fetch('/upload', {
      method: 'POST',
      body: value,
    });
  }
};

const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadFile(file);
});

Blob 的使用场景

1、生成文件下载
可以通过 Blob 创建文件并生成下载链接供用户下载文件

// 动态生成一个文本文件
const blob = new Blob(["Hello, World!"], { type: "text/plain" });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = "example.txt"; // 文件名
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url); // 释放 URL 对象

2、上传文件
将用户上传的文件通过 Blob 或 FormData 传输到服务器。

const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData,
  });
  console.log('File uploaded:', response.ok);
});

3、文件预览
用于在网页上显示用户上传的文件内容，比如图片、音频、视频或 PDF 文件。

// 1 文件预览图片
const input = document.querySelector('#fileInput');
input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);

  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);

  URL.revokeObjectURL(url); // 释放 URL
});

// 2 使用 Canvas 生成图片并保存为 Blob
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 200, 200);

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'canvas-image.png';
  a.click();
  URL.revokeObjectURL(url);
}, 'image/png');

4、CSV 或 Excel 数据生成

const data = [
  ["Name", "Age", "City"],
  ["Alice", "24", "New York"],
  ["Bob", "30", "San Francisco"],
];

const csvContent = data.map(row => row.join(',')).join('\n');
const blob = new Blob([csvContent], { type: 'text/csv' });

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = "data.csv";
a.click();
URL.revokeObjectURL(url);

File

File 是 JavaScript 中代表文件的数据结构，是 Blob 的子类，包含文件的元数据（如文件名、文件大小、类型等）。File 对象通常由用户通过 选择文件时创建，也可以使用 JavaScript 构造函数手动创建。

new File(array, name, options);

// 创建一个 File 对象
const file = new File(["Hello, File!"], "example.txt", { type: "text/plain", lastModified: Date.now() });
console.log(file); 
// File { name: "example.txt", size: 12, type: "text/plain", lastModified: 1695644303000 }

File 对象继承了 Blob 对象的方法，因此可以使用一些 Blob 对象的方法来处理文件数据。
1、slice(): 从文件中获取一个子部分数据，返回一个新的 Blob 对象。

const blob = file.slice(0, 1024); // 获取文件的前 1024 个字节

const file = new File(["Hello World!"], "example.txt", { type: "text/plain" });
const blob = file.slice(0, 5); // 获取文件的前 5 个字节

blob.text().then((text) => {
  console.log(text); // 输出: "Hello"
});

2、text(): 读取文件内容，并将其作为文本返回（这是 Blob 的方法，但可以用于 File 对象）

const file = new File(["Sample content for file"], "example.txt", { type: "text/plain" });

file.text().then((text) => {
  console.log(text); // 输出: "Sample content for file"
});

3、arrayBuffer(): 将文件内容读取为 ArrayBuffer（用于处理二进制数据）。

const file = new File([new Uint8Array([65, 66, 67])], "example.bin");
file.arrayBuffer().then((buffer) => {
  const view = new Uint8Array(buffer);
  console.log(view); // 输出: Uint8Array(3) [65, 66, 67]
});

4、stream(): 返回一个 ReadableStream 对象，可以通过流式读取文件内容。

const stream = file.stream();

const file = new File(["Chunk 1\nChunk 2\nChunk 3"], "example.txt");

const reader = file.stream().getReader();
reader.read().then(function process({ done, value }) {
  if (done) {
    console.log("Stream complete");
    return;
  }
  console.log(new TextDecoder().decode(value)); // 输出文件的部分内容
  return reader.read().then(process);
});

总结

Blob 是一个通用的二进制数据容器，适合处理动态内容、文件片段等，但不具有文件的元数据（如文件名、最后修改时间等）。
File 是一个包含文件元信息的 Blob，主要用于用户上传文件的场景（File 对象看作是带有文件信息的 Blob）
在这里插入图片描述

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

Best_卡卡
关注
JavaScript中的File对象和编程
CodeSpark的博客
10-04 385
本文介绍了JavaScript中的File对象以及如何使用它进行文件处理的编程示例。通过File对象，开发者可以获取文件的信息、进行文件切片、读取文件内容等操作。在本文中，我们将探讨JavaScript中的File对象以及如何使用它进行文件处理的编程示例。然后，我们可以使用File对象的属性访问文件的信息，例如文件名、类型和最后修改时间。在JavaScript中，可以通过用户在网页上选择文件来创建一个File对象。除了上述示例中的属性之外，File对象还提供了其他一些有用的方法和属性。
前端中的 File 和 Blob两个对象到底有什么不同
w807139809的博客
10-15 997
Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。你可以将 File 对象看作是带有文件信息的 Blob。// true二者在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用，而 File 更专注于与文件系统的交互。
javascript 操作file文件
l23456789o的博客
07-17 3339
javascript 操作file文件 支持File API的浏览器有IE10+,Firefox3.5+，Opera10.6+，Safari5+,Chrome。 1.在表单元素上<input type="fiel" name="file" id="file"/>，可以选择一个或多个文件，通过获取文件元素对象的集合files，来操作每一个对象files[i]； 用法：DOM操作 var files=document.getElementById("file"); 　　var file=files
JavaScript教程：深入理解Blob对象
最新发布
gitblog_00150的博客
06-27 398
JavaScript教程：深入理解Blob对象 什么是Blob对象？ Blob（Binary Large Object）是JavaScript中用于处理二进制数据的高级对象，它属于浏览器提供的File API规范。与ECMA标准中的ArrayBuffer和类型化数组不同，Blob更专注于处理带有类型信息的二进制数据。 Blob的创建与结构 Blob对象由两部分组成： 可选的类型字符串（通常是MI...
javascript学习——File 对象，FileList 对象，FileReader 对象
白话机器学习
10-05 1516
File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。最常见的使用场合是表单的文件上传控件（），用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 实例对象。上面代码中，file是用户选中的第一个文件，它是 File 的实例。
JavaScript文件操作(5)-Blob类型（二进制大对象）
william 成长路上
04-17 4644
Posted by unbug on Jun 6, 2012 in HTML5 | 2 comments 到目前，本系列文章集中讲了File对象能在用户参与下对操作文件的产生的积极效果。事实上File对象是Blob的特殊类型。即大块的二进制数据，File对象的尺寸及类型等属性都继承自Blob。 大多时候， Blob 的 File是可以同时使用的。例如，可以用FileReader从Blo
【JavaScript】blob
小秀的博客
09-22 526
URL 通常是短期的，只在当前页面会话中有效，并且通常不会在浏览器历史记录中保留。它们用于将二进制数据以 URL 形式嵌入到网页中，以便浏览器可以访问和处理这些数据。这种类型的 URL 主要用于在浏览器中生成临时的二进制数据，通常是通过 JavaScript 动态创建的，比如从用户的本地文件系统读取文件内容，然后将其以。通常指的是一种数据类型，用于存储二进制数据，比如图像、音频、视频等等。则是该二进制数据的来源或者说生成它的网站的域名。表示这是一个二进制数据的 URL，而。是一个 URL，其中。
javascript使用Blob对象实现的下载文件操作示例
11-20
在JavaScript中，Blob对象用于表示不可变的原始数据，它不是JavaScript的内置数据类型，而是用来处理二进制数据的一种方式。Blob对象是File对象的基类，File对象则专门用于处理用户系统上的文件。Blob对象可以接收一...
JavaScript Blob对象原理及用法详解
10-14
总的来说，JavaScript的Blob对象提供了处理和操作二进制数据的强大工具，它使得在Web应用中处理大文件和其他媒体内容变得简单而高效。理解Blob对象的原理和用法对于提升Web开发技能至关重要。通过学习和实践，开发者...
javascript之操作文件（Files）
EasyJS 一个简单的JS框架
03-22 1715
 操作文件（Files）  对文件进行的操作要比以上介绍的驱动器（Drive）和文件夹（Folder）操作复杂些，基本上分为以下两个类别：对文件的创建、拷贝、移动、删除操作和对文件内容的创建、添加、删除和读取操作。下面分别详细介绍。  （一）创建文件  一共有3种方法可用于创建一个空文本文件，这种文件有时候也叫做文本流（text stream）。  第一种是使用CreateTextFile方法
JavaScript 文件对象File
热门推荐
weixin_44955769的博客
01-21 2万+
在浏览器中操作文件，多数情况下用到的是 File 对象，从<input type='file' />元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API. File 对象继承自 Blob 对象，先看看 Blob 对象。 1. Blob 对象 Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。 Blob构造函数 Blob(array[, options]) ar
Blob.js文件
12-08
浏览器生成文件并下载，IE10以上，FF，chrome均可。 该文件与FileSaver可以一同使用,该文件为自身手动拷贝，自测有效 http://download.csdn.net/download/qq_22697455/10150726
JS blob 文件（需要
07-13
浏览器生成文件并下载，IE10以上，FF，chrome均可。
Javascript中Blob介绍
似水光阴
06-01 1万+
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示： 如你所见，myBlob 对象含有两个属性：size 和 type。其中 属性用于表示数据的大小（以字节为单位）， 是 MIME 类型的
JavaScript 文件操作
weixin_34402408的博客
05-01 1652
工作中常常需要写一些小脚本处理事情，比如创建测试文件、处理某个文本等等，之前做测试开发的时候是用 Python 做的，现在写前端，JavaScript 成为主力语言，自然想把这些小脚本用 JavaScript 实现。脚本中常见的工作就是文件读写，因此对 JavaScript 文件读写知识做下强化和总结。 Node Node 中的文件系统操作被封装在 fs 模块，每个 API 都提供同步和异步两种形...
Blob DOM JS
08-12 6756
Blob TABLE OF CONTENTS 属性 构造函数 方法 slice() 参数 返回值 注意 BlobPropertyBag Blob构造函数用法举例 例子:使用类型数组和Blob对象创建一个对象URL 浏览器兼容性 注意:关于slice()的实现 Gecko备注 相关链接
【JavaScript 教程】浏览器—File 对象，FileList 对象，FileReader 对象
web前端开发
09-15 2025
作者 | 阮一峰1、File 对象File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用...
JavaScript中的Blob你知道多少
txun123的博客
04-17 1万+
很多开发者可能用过Blob，但是却并没有认真了解过Blob是什么？Blob的API有哪些？我们什么时候会用到Blob？ 下面跟我一起详细了解下Blob吧~ 一、Blob 是什么 Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在JavaScript中 Blob 类型的对象表示不可变的类似文件对象的原始数据。为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值