JS中File和Blob的概念是什么

本文小编为大家详细介绍“JS中File和Blob的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“JS中File和Blob的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了琼山免费建站欢迎大家使用！

File / Blob 是什么

Blob 是最原始的文件对象，File 是基于 Blob 改造的，因此 Blob 的属性/方法在 File 中同样可以使用，你可以理解为 File === Blob，像 input 选择文件后会返回的文件信息就是属于 File

怎么操作 File / Blob

JS 提供的 FileReader 、URL.createObjectURL（） 都可以处理 File / Blob

FileReader

FileReader 可以用来读取 File / Blob ， input 选择上传文件时比如是一张图片 File ，那么我们可以传递这个 File 到 FileReader 提供相关的 API 来转成对应的数据

FileReader APi

reader.readAsDataURL（file || blob） 转成 base64

reader.readAsArrayBuffer（file || blob） 转成缓冲数组

reader.readAsText（file || blob） 转成文本

reader.readAsBinaryString（file || blob） 转成字节

我们来看看 demo

控制台打印出 base64

拿到 base64 后就可以做你想做的事情了，比如放到 img.src 或粘贴到浏览器访问

URL.createObjectURL（）

URL.createObjectURL（） 可以将 File / Blob 转成一个 url 访问链接，

格式类似为：blob:wer3-werwr3-wer-qweq5-eedee 这样的字符串，你可以放到 img.src 或粘贴到浏览器访问，我们来看看 demo

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

base64 和 blob:url 应用场景

base64 通常用于图片展示、图片预览

blob: url 通常用于分块上传、点击链接文件下载、生成 pdf 等、

手动创建 Blob

由于选择 input 文件会自动返回 File，这里就以创建 Blob 为例，

我们可以将对象数据放到 Blob 里面然后生成 blob:url || base64 || 文本数据

我们来看下 demo

const obj = {name: 'Jack'}

// 将数据放到 blob

const blob = new Blob（[JSON.stringify（obj , null, 2）], {type : 'application/json'}）;

// 转成 base64

const reader = new FileReader（）

reader.readAsDataURL（blob）

reader.onload = （res） => {

  console.log（res.target.result）

}

// 转成 url

console.log（URL.createObjectURL（blob））

// 直接读取文本（创建 blob 会返回一个 promise ，所以我们可以用 await 来获取）

console.log（await blob.text（））

好了，内容就到这里，相信你已经对 FIle / Blob 基本概念有所了解。

Note

生成的 base64 和 url 并不是持久化，它们只是存在内存中，当你关闭文档后会自动从内存中删掉，因此你不可以将它们放到 localStore 或服务器中。

读到这里，这篇“JS中File和Blob的概念是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。