在前端开发中，我们通常需要上传或处理图片等媒体文件。有时候，我们会从服务器获取到一个 base64 编码的 dataURL 字符串，但是在上传或处理文件时，我们更需要的是文件对象。本文将详细介绍如何在 JavaScript 中将 dataURL 转换为文件对象，并提供示例代码。
Step 1: 解析 dataURL
首先，我们需要将 dataURL 解析成二进制数据。使用 atob 函数可以将 base64 编码的字符串解码成原始数据。然后，我们可以使用 Uint8Array 类型的数组来保存解码后的数据。
-- -------------------- ---- -------
-------- ------------------------ -
----- ------ - ---------------------- -- ----
----- ------------ - -------------
----- --- - --------------------
----- ----- - --- ----------------
--- ---- - - -- - - ---- ---- -
-------- - ---------------------------
-
------ ------
-Step 2: 创建文件对象
有了二进制数据，我们就能创建一个文件对象了。使用 Blob 构造函数可以创建一个新的 Blob 对象，它接受一个包含二进制数据的数组作为参数。
function dataURLtoFile(dataURL, filename) {
const bytes = dataURLtoBinary(dataURL);
const contentType = dataURL.split(",")[0].split(":")[1].split(";")[0];
return new Blob([bytes], { type: contentType, name: filename });
}在创建文件对象时，我们还可以设置文件的类型和名称。这些信息将有助于上传或处理文件。
示例代码
下面是一个完整的示例，演示了如何将 dataURL 转换为文件对象，并使用 FormData 将文件上传到服务器。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------- -- ---- --------------
-------
------
------ ----------- ---------------- ---------------------------------- --
--- --
---- ------------ ----------------- ------ ----------- ------- --
--------
-------- ----------------------- -
----- ---- - ----------------------
----- ------ - --- -------------
------------- - -------- ------- -
----- ------- - --------------------
----- ------- - ---------------------- -----------
---------------------
--------------------
--
---------------------------
-
-------- ------------------------ -
----- ------ - ---------------------- -- ----
----- ------------ - -------------
----- --- - --------------------
----- ----- - --- ----------------
--- ---- - - -- - - ---- ---- -
-------- - ---------------------------
-
------ ------
-
-------- ---------------------- --------- -
----- ----- - -------------------------
----- ----------- - --------------------------------------------------
------ --- ------------- - ----- ------------ ----- -------- ---
-
-------- ----------------- -
----- ------ - --- -------------
---------------- - -------- -- -
-------------------------------------- - --------------
--
---------------------------
-
-------- ---------------- -
----- -------- - --- -----------
----------------------- ------
---------------- -
------- -------
----- ---------
--
---------------- -- ----------------
------------ -- ------------------
-------------- -- ----------------------
-
---------
-------
-------在这个示例中，我们首先用 FileReader 对象读取用户选择的文件，并将其转换为 dataURL。然后，我们使用 dataURLtoFile 函数将 dataURL 转换为文件对象，并
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29925