随着前端技术的不断发展，我们经常需要在浏览器中对二进制数据进行编码和解码，以便在网络上传输。Base64 是一种常见的编码方式，而 b64u-lite 是一个非常流行的 npm 包，它提供了一组简单易用的函数，用于对 Base64 数据进行编码和解码。
安装 b64u-lite
你可以使用 npm 安装 b64u-lite，安装命令如下：
npm install b64u-lite --save
编码和解码
b64u-lite 提供了两个函数：encode 用于编码，decode 用于解码。这两个函数的用法非常简单，代码示例如下：
import { encode, decode } from 'b64u-lite';
const str = 'Hello World';
const encoded = encode(str); // 编码成 Base64 格式
const decoded = decode(encoded); // 解码成原始字符串需要注意的是，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