随着前端技术的不断发展，我们经常需要在浏览器中对二进制数据进行编码和解码，以便在网络上传输。Base64 是一种常见的编码方式，而 b64u-lite 是一个非常流行的 npm 包，它提供了一组简单易用的函数，用于对 Base64 数据进行编码和解码。
安装 b64u-lite
你可以使用 npm 安装 b64u-lite，安装命令如下：
--- ------- --------- ------
编码和解码
b64u-lite 提供了两个函数：encode 用于编码，decode 用于解码。这两个函数的用法非常简单，代码示例如下：
------ - ------- ------ - ---- ------------ ----- --- - ------ ------- ----- ------- - ------------ -- --- ------ -- ----- ------- - ---------------- -- --------
需要注意的是，b64u-lite 只支持 URL 安全的 Base64 编码方式，也就是说它将 + 和 / 替换成了 - 和 _，并且去掉了 =。这种序列化方式更适合在 URL 和 cookie 中传输。
示例 - 图片预览
现在我们来看一个示例，如何使用 b64u-lite 在页面上预览图片。首先，我们需要将二进制图片数据编码成 Base64 字符串，然后使用 data: URL 将其嵌入到 HTML 页面中。预览图片的代码示例如下：
--------- -----
----- ----------
------
----- --------------- --
-------------- -------------
-------
------
------ ----------- --------------- --
---- -------------------
------- --------------
------ - ------ - ---- ------------
----- --------- - --------------------------------------
----- ------- - -----------------------------------
------------------------------------ -- -- -
----- ---- - -------------------
----- ------ - --- -------------
-------------------------------- -- -------
------------- - --- -- -
----- ------- - ------------------------ -- --- ------ --
----- --- - ------------------------------
------- - -------------------------------------- -- -- ----- --- ----
----------------- - ---
-------------------------
--
---
---------
-------
-------上面这段代码将一个文件输入框和一个 DIV 元素展示的 img 标签相连，只需要将需要预览的文件拖入文件选择框中，img 标签会自动将文件内容以 base64 编码方式进行解析，并将解析结果嵌入到 data:url 中，预览图片。
总结
b64u-lite 是一个非常实用的 npm 包，它提供了简单易用的函数，用于对 Base64 数据进行编码和解码。通过该教程，你了解了如何安装和使用 b64u-lite，还学习了一个实用的示例。Base64 编码是现代 Web 应用程序中的常见需求，通过 b64u-lite，你可以快速轻松地实现编码和解码操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f1c2cd4403f2923b035c52c