Dart 知识集锦 | Base64 编解码

---

theme: cyanosis

1. Dart 中的 Base64 编解码

在编程的世界中，数据的种类可谓是缤纷多彩。但是他们有本质的共性: 都是二进制的数据。在数据传输过程中，字节数组有时并不是很方便，比如网络传输。
Base64 包括小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"一共64个字符的字符集。它可以将 字节数组 进行编码进行传输。Dart 语言的 convert 包中，有 Base64Codec 支持 Base64 编解码，下面一起来看一下其使用方式:

---

Base64 编码

Base64 编码是将 字节数组 转化为字符串的一种方式，如下是 Base64Encoder 的 convert 方法：

---

Base64 解码

Base64 的字符串是不可读的，但可以对 Base64 字符串进行解码，获取其原本的 字节数组 。如下是 Base64Decoder 的 convert 方法：

---

2. Base64 编码使用方式

字符串、图片、视频、音频、文件... 任何数据本质上都可以是字节数组。所以任何数据都可以进行 Base64 编码，下面先看一下对字符串的编码：

• 字符串编码

Base64 编码的入参是字符列表，需要将文本通过 utf8 进行编码，得到 Unit8List ，然后将其作为入参进行转换。 张风捷特烈 对应的 Base64 编码为 5byg6aOO5o2354m554OI：

```dart import 'dart:convert';

void main() async { String data = '张风捷特烈'; String ret = base64.encode(utf8.encode(data)); print(ret); // 5byg6aOO5o2354m554OI

} ```

• 图片/文件编码

任何文件都是字节数组，所以一张图片也有其对应的 Base64 编码，如下所示，读取一张图片的字节数组，将其通过 base64 进行编码，可以得到一个字符串:

```dart import 'dart:convert'; import 'dart:io'; import 'dart:typed_data';

void main() async { String file = r'D:\Files\photo\bg\src\out.png'; String ret = await base64File(file); print(ret); }

Future base64File(String path) async { Uint8List list = await File(path).readAsBytes(); return base64.encode(list); } ```

通过对这个字符串的解析，可以获取图片对应的原始数据，从而展示图片。这样对于一些小图片，通过 Base64 编码就可以很轻松的进行数据传输，而不是通过网络请求图片或读取资源：

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

---

3. Base64 解码使用方式

Base64 解码 是将编码后的字符串还原为原始字符串。如下所示，通过 base64.decode 将 '5byg6aOO5o2354m554OI'解码得到字节数组，然后将字节数组通过 utf8 编码为字符串。当然，你也可以直接将字节数组写入文件：

```dart import 'dart:convert'; import 'dart:typed_data';

void main() async { String data = '5byg6aOO5o2354m554OI'; Uint8List bytes = base64.decode(data); print(utf8.decode(bytes)); //张风捷特烈 } ```

---

Flutter 中的 Image 组件有一个 memory 构造，可以接收字节数组作为图片数据源。刚好 base64 解码可以生成一个 Uint8List 对象：

下面代码，可以让 Flutter 的 Image 组件展示 Base64 编码的图片。如果 base64 非常大，可以考虑将解析逻辑放在 isolate 里解析，解析过程中展示 loading 示意：

```dart final String baseImage = """base字符串"""; late Uint8List imageBytes;

@override void initState() { super.initState(); /// 解析数据 imageBytes = base64.decode(baseImage);

}

/// 视图展示 Image.memory(imageBytes) ```

---

本文主要介绍了 Dart 的 Base64 编解码能力，大家也可以尝试一下，通过 Flutter 提供交互界面，来打造 Base64 编解码的小工具。匠心千刃(Blade) 正在尝试基于 tolyui 打造一个全平台的通用工具集。