在前端开发中，我们常常需要处理文件上传、下载等操作。ES9 中新增了 Blob 和 File API，使得文件的处理更加方便和灵活。本文将介绍如何在 ES9 中使用 Blob 和 File API。
Blob API
Blob 是二进制数据的容器，可以用来存储和操作二进制数据。Blob API 定义了以下方法：
new Blob()
创建一个新的 Blob 对象，可以传入一个数组作为参数，数组中的元素可以是字符串或 ArrayBuffer 对象。
----- ---- - --------- --------- ----- ---- - --- ---------- ------ ---------------
blob.size
获取 Blob 对象的大小，单位为字节。
----------------------- -- --
blob.type
获取 Blob 对象的 MIME 类型。
----------------------- -- ----------
blob.slice()
对 Blob 对象进行切片，返回一个新的 Blob 对象。
----- --------- - ------------- ---
File API
File 继承自 Blob，是对文件的抽象表示。File API 定义了以下方法：
new File()
创建一个新的 File 对象，需要传入一个 Blob 对象和文件名。
----- ---- - --- ------------ ------------ ------ ---------------
file.name
获取文件名。
----------------------- -- ---------
file.lastModified
获取文件最后修改时间，返回时间戳。
------------------------------- -- -------------
file.lastModifiedDate
获取文件最后修改时间，返回 Date 对象。
----------------------------------- -- --- --- -- ---- -------- -------- --------
file.size
获取文件大小，单位为字节。
----------------------- -- --
file.type
获取文件 MIME 类型。
----------------------- -- ----------
file.slice()
对文件进行切片，返回一个新的 File 对象。
----- --------- - ------------- ---
示例代码
下面是一个使用 Blob 和 File API 的示例代码，实现了文件上传和下载功能。
------ ----------- ----------------
------- -----------------------------
-- -------- ---------------------------
--------
----- --------- - --------------------------------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
--- ---- - -----
------------------------------------ -- -- -
---- - -------------------
---
----------------------------------- -- -- -
----- -------- - --- -----------
----------------------- ------
---------------- -
------- -------
----- --------
--
--------- -- -----------
---------- -- -
------------------
---
---
-------------------------------------- -- -- -
------------------
--------- -- -----------
---------- -- -
----- --- - --------------------------
----- - - ----------------------------
------ - ----
---------- - ------------
----------
-------------------------
---
---
---------在这个示例中，我们通过 fileInput 获取用户上传的文件，然后使用 FormData 将文件上传到服务器。在下载文件时，我们使用 fetch 获取服务器返回的 Blob 对象，并将其转化为 URL，然后创建一个 a 标签，设置其 href 属性为 URL，download 属性为文件名，模拟用户点击下载链接的操作。
总结
Blob 和 File API 为文件的处理提供了更加方便和灵活的方式，可以用于文件上传、下载、切片等操作。在实际开发中，我们可以根据具体需求选择合适的方法和 API 进行操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660cee16d10417a222d52f3c