前端File与Blob对象：相同点、不同点及操作方法

hongkid

于 2024-10-09 14:30:00 发布

阅读量225

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/hongkid/article/details/142779408

版权

在Web开发中，File 和 Blob 对象是处理文件数据的核心。它们允许开发者在客户端上以二进制格式读取、创建、修改和传输文件。本文将详细介绍 File 和 Blob 对象的相同点、不同点，以及如何进行转换、创建、读取和写入等操作。

相同点

数据存储：两者都是用于存储二进制数据的对象。
不可变性：一旦创建，File 和 Blob 对象的数据内容就不能被更改。
API接口：它们都提供了一些相同的方法，如 slice() 方法，可以用来创建一个新的 Blob 或 File 实例，包含原对象的一部分。

不同点

来源：File 对象总是来源于用户选择的文件（例如通过 <input type="file">），而 Blob 可以来自任何二进制数据源，包括通过网络请求获取的数据。
属性：File 继承了 Blob 的所有属性，并额外提供了 name（文件名）和 lastModified（最后修改时间）等属性，这些属性对于描述文件非常有用。
用途：虽然两者都可以用来在网络上传输数据，但是 File 更常用于文件上传场景，而 Blob 则广泛应用于处理任何类型的数据流，比如图片、视频或音频文件。

转换

从 Blob 转为 File:

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});
const file = new File([blob], 'hello.txt', {type: 'text/plain'});

从 File 转为 Blob:
由于 File 继承自 Blob，所以可以直接使用 File 对象作为 Blob 使用，无需显式转换。

创建

创建 Blob:

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

创建 File:

const file = new File(['Hello, world!'], 'hello.txt', {type: 'text/plain'});

读取

读取 Blob 或 File:
使用 FileReader API 可以异步读取 Blob 或 File 的内容。

const reader = new FileReader();
reader.onloadend = function() {
  console.log(reader.result); // 输出文件内容
};
reader.readAsText(blob); // 也可以使用 readAsDataURL, readAsBinaryString, readAsArrayBuffer

写入

创建新的 Blob 或 File:
因为 Blob 和 File 对象本身是不可变的，所以“写入”实际上是创建一个新的 Blob 或 File 实例。
```
const newBlob = new Blob(['New content'], {type: 'text/plain'});
```

实际应用示例

假设我们需要从服务器下载一个文件，然后将其保存到用户的计算机上：

发起请求获取文件数据：

fetch('https://example.com/path/to/file')
  .then(response => response.blob())
  .then(blob => {
    // 下一步处理
  });

创建一个下载链接并触发点击事件：

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
}

// 使用函数
downloadBlob(blob, 'downloaded-file.txt');