Base64 编码详解：原理、应用与最佳实践

几年前我接手过一个邮件系统的 bug：用户反馈某些 PDF 附件下载下来打不开，文件大小却看着正常。折腾了大半天，最后发现是某个中间服务在转发时把附件的换行处理搞坏了——那一坨 Content-Transfer-Encoding: base64 的内容被多塞了几个空格，解码直接错位。从那以后我对 Base64 这东西就特别上心：它看起来人畜无害，真出问题的时候却很隐蔽。

很多人对 Base64 的理解停留在"能把数据转成一串字符串"，知道 btoa、atob 怎么用，但 = 是干嘛的、为什么 JWT 里的 Base64 长得不太一样、为什么直接 btoa('你好') 会报错——这些细节一旦碰上就容易踩坑。这篇就把我这些年趟过的坑和它的原理一起讲清楚。

Base64 是什么？

Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方法。它可以将任意二进制数据转换为 ASCII 字符串格式，使得二进制数据可以在只支持文本的环境中传输。

为什么是 64？

Base64 使用 64 个字符来表示数据：

A-Z (26 个字符)
a-z (26 个字符)
0-9 (10 个字符)
+ 和 / (2 个字符)
= (填充字符)

这 64 个字符都是 ASCII 字符集中可打印且在各种系统中都安全使用的字符。

先搞清楚：什么时候该用，什么时候别用

在动手之前，我习惯先掂量一下到底该不该上 Base64。下面这张表是我自己的经验总结，尤其是最后一列——踩坑点，基本都是真摔过：

方案	体积变化	可读性	适用场景	踩坑点
Base64	+33%	差	小图标内联、Data URL、邮件	误当加密用；大文件直接拖垮内存
Base64URL	+33%	差	URL 参数、JWT、文件名	忘了把 `+/=` 换掉，URL 里直接被截断
Hex（十六进制）	+100%	一般	哈希值、调试时看字节	体积翻倍，传输浪费
不编码（原始二进制）	0	无	文件上传、流式传输	文本协议里会被换行/编码搞坏

一句话：只有当传输通道只认文本、而你手里是二进制时，Base64 才真正有价值。其它情况大多有更省事的选择。

Base64 编码原理

编码过程

让我们通过一个例子理解 Base64 的编码过程。假设要编码字符串 "Man"：

步骤 1：转换为二进制

M = 77  = 01001101
a = 97  = 01100001
n = 110 = 01101110

连接起来：010011010110000101101110

步骤 2：分组（每 6 位一组）

010011 | 010110 | 000101 | 101110

步骤 3：转换为 Base64 字符

010011 = 19 = T
010110 = 22 = W
000101 = 5  = F
101110 = 46 = u

结果："Man" → "TWFu"

填充规则

如果原始数据的字节数不是 3 的倍数，需要用 = 填充：

"A"    → 01000001           → 010000 010000 (padding)
       → QQ==

"AB"   → 01000001 01000010 → 010000 010100 001000 (padding)
       → QUI=

编码 vs 加密：重要区别

**Base64 不是加密！**这大概是关于它最常见、也最危险的误解，前面我已经抱怨过一次，这里把区别摆清楚。

Base64 编码是可逆的，不需要任何密钥，任何人拿到字符串都能原样还原——它的目的是让二进制数据能在文本环境里安全传输，跟"保密"没半点关系。

真正的加密（比如 AES）则完全不同：没有密钥就解不开，这才是用来保护敏感信息的工具。

// ❌ 错误用法：用 Base64 "加密"密码
const password = btoa('myPassword123');
// 任何人都能轻易解码

// ✅ 正确做法：使用真正的加密
const encrypted = CryptoJS.AES.encrypt('myPassword123', secretKey);

Base64 的实际应用场景

1. 在 CSS/HTML 中嵌入图片

Data URL 方案：

<!-- 传统方式：需要额外 HTTP 请求 -->
<img src="/images/logo.png" alt="Logo" />

<!-- Base64 方式：零额外请求 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Logo" />

CSS 背景图：

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQi...');
}

优点：

减少 HTTP 请求
适合小图标（< 10KB）
防止图片加载失败

缺点：

文件体积增大约 33%
不能被缓存（除非整个 CSS/HTML 被缓存）
大图片会导致代码臃肿

2. 邮件附件传输

MIME（Multipurpose Internet Mail Extensions）使用 Base64 编码邮件附件：

Content-Type: image/png; name="screenshot.png"
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAAL
GPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAA
F3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gEDDREd
...

3. JWT（JSON Web Tokens）

JWT 使用 Base64 URL 编码（变种）：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

解码后：

// Header
{
  "alg": "HS256",
  "type": "JWT"
}

// Payload
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

4. 存储二进制数据到文本数据库

在不支持 BLOB 类型的数据库中存储文件：

INSERT INTO files (name, content) VALUES (
  'document.pdf',
  'JVBERi0xLjMKJcTl8uXrp/Og0MTGCjQgMCBvY...'
);

5. Canvas 图片导出

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/png');
// data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

// 转换为 Blob 下载
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png';
link.click();

Base64 变种

URL 安全的 Base64

标准 Base64 的 + 和 / 在 URL 中有特殊含义，需要替换：

标准 Base64	Base64 URL
`+`	`-`
`/`	`_`
`=`	省略或保留

// 标准 Base64
btoa('hello world'); // "aGVsbG8gd29ybGQ="

// URL 安全版本
function base64UrlEncode(str) {
  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

MIME Base64

用于邮件传输，每 76 个字符换行：

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAAL
GPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAA
F3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gEDDREd

性能考虑

编码开销

Base64 编码会增加约 33% 的数据大小：

原始大小：3 字节 = 24 位
编码后：  4 字符 = 32 位

开销：(32 - 24) / 24 = 33.33%

何时避免使用 Base64

❌ 不适合的场景：

大文件传输

// 不推荐：10MB 图片转 Base64
const hugeImage = largeFileToBase64(); // ~13.3MB

频繁的编解码操作

// 性能瓶颈
for (let i = 0; i < 10000; i++) {
  const encoded = btoa(data);
  const decoded = atob(encoded);
}

需要缓存的资源

<!-- 每次都重新下载整个 HTML -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABA..." />

<!-- 可以被浏览器缓存 -->
<img src="/images/logo.jpg" />

反过来，下面这些场景用 Base64 就比较舒服：内联小图标（10KB 以下）、一次性生成且不会复用的数据、必须走纯文本通道的二进制内容，以及嵌入 SVG。判断标准其实就一条——数据小、又躲不开文本环境。

JavaScript 中的 Base64 操作

浏览器 API

// 编码
const encoded = btoa('Hello World'); // "SGVsbG8gV29ybGQ="

// 解码
const decoded = atob(encoded); // "Hello World"

处理中文（UTF-8）

btoa/atob 只支持 Latin1 字符，中文需要特殊处理：

// ❌ 直接编码中文会报错
btoa('你好'); // Error: InvalidCharacterError

// ✅ 正确方法
function utf8ToBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) =>
      String.fromCharCode(parseInt(p1, 16))
    )
  );
}

function base64ToUtf8(base64) {
  return decodeURIComponent(
    Array.prototype.map
      .call(atob(base64), (c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
      .join('')
  );
}

utf8ToBase64('你好世界'); // "5L2g5aW95LiW55WM"

Node.js 中的 Base64

// 编码
const base64 = Buffer.from('Hello World').toString('base64');

// 解码
const text = Buffer.from(base64, 'base64').toString('utf-8');

// 处理文件
const fs = require('fs');
const imageBuffer = fs.readFileSync('image.png');
const base64Image = imageBuffer.toString('base64');

安全注意事项

1. 不要用于敏感数据

// ❌ 危险
localStorage.setItem('token', btoa(apiKey));

// ✅ 如需存储，使用加密
import CryptoJS from 'crypto-js';
const encrypted = CryptoJS.AES.encrypt(apiKey, secretKey).toString();
localStorage.setItem('token', encrypted);

2. 防止 Base64 注入

// 验证 Base64 格式
function isValidBase64(str) {
  const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
  if (!base64Regex.test(str)) return false;

  try {
    return btoa(atob(str)) === str;
  } catch (err) {
    return false;
  }
}

3. 限制大小

const MAX_BASE64_SIZE = 10 * 1024 * 1024; // 10MB

function safeBase64Decode(base64) {
  if (base64.length > MAX_BASE64_SIZE) {
    throw new Error('Base64 string too large');
  }
  return atob(base64);
}

实用工具代码

文件转 Base64

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const base64 = await fileToBase64(e.target.files[0]);
  console.log(base64);
  // data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
});

Base64 转 Blob

function base64ToBlob(base64, contentType = '') {
  const byteCharacters = atob(base64.split(',')[1]);
  const byteNumbers = new Array(byteCharacters.length);

  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }

  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: contentType });
}

// 使用
const blob = base64ToBlob(base64String, 'image/png');
const url = URL.createObjectURL(blob);

流式处理大文件

async function* base64Stream(file, chunkSize = 1024 * 1024) {
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const buffer = await chunk.arrayBuffer();
    const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
    yield base64;
    offset += chunkSize;
  }
}

// 使用
for await (const chunk of base64Stream(largeFile)) {
  // 处理每个 chunk
  sendToServer(chunk);
}

性能优化技巧

1. 使用 Web Workers

// worker.js
self.addEventListener('message', (e) => {
  const { data, action } = e.data;

  if (action === 'encode') {
    self.postMessage(btoa(data));
  } else if (action === 'decode') {
    self.postMessage(atob(data));
  }
});

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ action: 'encode', data: largeData });
worker.addEventListener('message', (e) => {
  console.log('Encoded:', e.data);
});

2. 缓存结果

const base64Cache = new Map();

function cachedBase64Encode(data) {
  if (base64Cache.has(data)) {
    return base64Cache.get(data);
  }

  const encoded = btoa(data);
  base64Cache.set(data, encoded);
  return encoded;
}

最后说几句我的看法

写到这里，我反而想给 Base64 泼点冷水：别滥用它。我见过太多项目把几百 KB 的图片塞进 Data URL，HTML 文件直接膨胀成几兆，首屏白屏半天——就为了省那一个 HTTP 请求，得不偿失。Base64 的 +33% 体积不是免费的，它换不来缓存，还把本可以并行下载的资源焊死在了主文档里。

更让我无奈的是，到现在还有人拿 btoa() 当"加密"用，把 token、密码 Base64 一下就丢进 localStorage，觉得别人看不懂。说句不客气的：这跟没加密没区别，任何人 F12 一行 atob() 就还原了。Base64 是编码，编码的目的是"让数据能安全地走过文本通道"，跟"不让别人看懂"是两码事，千万别混。

我自己的判断标准很简单：图标小于 10KB、又确实想砍掉那个请求，可以内联；其它绝大多数情况，老老实实让浏览器去缓存独立文件。至于加密，该上 AES 就上 AES。

顺带提一句，平时调试时如果需要快速编解码——比如想看看某个 Data URL 里到底藏了什么、或者验证 JWT 的 payload——可以用我们的 Base64 在线工具。它全程在你浏览器本地跑，数据不会上传到任何服务器，贴敏感内容进去也不用担心泄露，这点我自己用着比较放心。

好了，坑都在上面了，祝你少踩。

相关阅读：

关于作者

ToolsForge 团队

我们是一支开发者小团队，负责构建和维护 ToolsForge —— 150+ 个完全在浏览器本地运行、隐私优先的工具。这些文章来自我们日常的工程实践，而不是纸上谈兵。

了解我们

Base64 编码详解：原理、应用与最佳实践

Base64 是什么？

为什么是 64？

Base64 使用 64 个字符来表示数据：

A-Z (26 个字符)
a-z (26 个字符)
0-9 (10 个字符)
+ 和 / (2 个字符)
= (填充字符)

这 64 个字符都是 ASCII 字符集中可打印且在各种系统中都安全使用的字符。

先搞清楚：什么时候该用，什么时候别用

在动手之前，我习惯先掂量一下到底该不该上 Base64。下面这张表是我自己的经验总结，尤其是最后一列——踩坑点，基本都是真摔过：

方案	体积变化	可读性	适用场景	踩坑点
Base64	+33%	差	小图标内联、Data URL、邮件	误当加密用；大文件直接拖垮内存
Base64URL	+33%	差	URL 参数、JWT、文件名	忘了把 `+/=` 换掉，URL 里直接被截断
Hex（十六进制）	+100%	一般	哈希值、调试时看字节	体积翻倍，传输浪费
不编码（原始二进制）	0	无	文件上传、流式传输	文本协议里会被换行/编码搞坏

一句话：只有当传输通道只认文本、而你手里是二进制时，Base64 才真正有价值。其它情况大多有更省事的选择。

Base64 编码原理

编码过程

让我们通过一个例子理解 Base64 的编码过程。假设要编码字符串 "Man"：

步骤 1：转换为二进制

M = 77  = 01001101
a = 97  = 01100001
n = 110 = 01101110

连接起来：010011010110000101101110

步骤 2：分组（每 6 位一组）

010011 | 010110 | 000101 | 101110

步骤 3：转换为 Base64 字符

010011 = 19 = T
010110 = 22 = W
000101 = 5  = F
101110 = 46 = u

结果："Man" → "TWFu"

填充规则

如果原始数据的字节数不是 3 的倍数，需要用 = 填充：

"A"    → 01000001           → 010000 010000 (padding)
       → QQ==

"AB"   → 01000001 01000010 → 010000 010100 001000 (padding)
       → QUI=

编码 vs 加密：重要区别

**Base64 不是加密！**这大概是关于它最常见、也最危险的误解，前面我已经抱怨过一次，这里把区别摆清楚。

Base64 编码是可逆的，不需要任何密钥，任何人拿到字符串都能原样还原——它的目的是让二进制数据能在文本环境里安全传输，跟"保密"没半点关系。

真正的加密（比如 AES）则完全不同：没有密钥就解不开，这才是用来保护敏感信息的工具。

// ❌ 错误用法：用 Base64 "加密"密码
const password = btoa('myPassword123');
// 任何人都能轻易解码

// ✅ 正确做法：使用真正的加密
const encrypted = CryptoJS.AES.encrypt('myPassword123', secretKey);

Base64 的实际应用场景

1. 在 CSS/HTML 中嵌入图片

Data URL 方案：

<!-- 传统方式：需要额外 HTTP 请求 -->
<img src="/images/logo.png" alt="Logo" />

<!-- Base64 方式：零额外请求 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Logo" />

CSS 背景图：

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQi...');
}

优点：

减少 HTTP 请求
适合小图标（< 10KB）
防止图片加载失败

缺点：

文件体积增大约 33%
不能被缓存（除非整个 CSS/HTML 被缓存）
大图片会导致代码臃肿

2. 邮件附件传输

MIME（Multipurpose Internet Mail Extensions）使用 Base64 编码邮件附件：

Content-Type: image/png; name="screenshot.png"
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAAL
GPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAA
F3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gEDDREd
...

3. JWT（JSON Web Tokens）

JWT 使用 Base64 URL 编码（变种）：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

解码后：

// Header
{
  "alg": "HS256",
  "type": "JWT"
}

// Payload
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

4. 存储二进制数据到文本数据库

在不支持 BLOB 类型的数据库中存储文件：

INSERT INTO files (name, content) VALUES (
  'document.pdf',
  'JVBERi0xLjMKJcTl8uXrp/Og0MTGCjQgMCBvY...'
);

5. Canvas 图片导出

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/png');
// data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

// 转换为 Blob 下载
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png';
link.click();

Base64 变种

URL 安全的 Base64

标准 Base64 的 + 和 / 在 URL 中有特殊含义，需要替换：

标准 Base64	Base64 URL
`+`	`-`
`/`	`_`
`=`	省略或保留

// 标准 Base64
btoa('hello world'); // "aGVsbG8gd29ybGQ="

// URL 安全版本
function base64UrlEncode(str) {
  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

MIME Base64

用于邮件传输，每 76 个字符换行：

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAAL
GPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAA
F3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gEDDREd

性能考虑

编码开销

Base64 编码会增加约 33% 的数据大小：

原始大小：3 字节 = 24 位
编码后：  4 字符 = 32 位

开销：(32 - 24) / 24 = 33.33%

何时避免使用 Base64

❌ 不适合的场景：

大文件传输

// 不推荐：10MB 图片转 Base64
const hugeImage = largeFileToBase64(); // ~13.3MB

频繁的编解码操作

// 性能瓶颈
for (let i = 0; i < 10000; i++) {
  const encoded = btoa(data);
  const decoded = atob(encoded);
}

需要缓存的资源

<!-- 每次都重新下载整个 HTML -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABA..." />

<!-- 可以被浏览器缓存 -->
<img src="/images/logo.jpg" />

JavaScript 中的 Base64 操作

浏览器 API

// 编码
const encoded = btoa('Hello World'); // "SGVsbG8gV29ybGQ="

// 解码
const decoded = atob(encoded); // "Hello World"

处理中文（UTF-8）

btoa/atob 只支持 Latin1 字符，中文需要特殊处理：

// ❌ 直接编码中文会报错
btoa('你好'); // Error: InvalidCharacterError

// ✅ 正确方法
function utf8ToBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) =>
      String.fromCharCode(parseInt(p1, 16))
    )
  );
}

function base64ToUtf8(base64) {
  return decodeURIComponent(
    Array.prototype.map
      .call(atob(base64), (c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
      .join('')
  );
}

utf8ToBase64('你好世界'); // "5L2g5aW95LiW55WM"

Node.js 中的 Base64

// 编码
const base64 = Buffer.from('Hello World').toString('base64');

// 解码
const text = Buffer.from(base64, 'base64').toString('utf-8');

// 处理文件
const fs = require('fs');
const imageBuffer = fs.readFileSync('image.png');
const base64Image = imageBuffer.toString('base64');

安全注意事项

1. 不要用于敏感数据

// ❌ 危险
localStorage.setItem('token', btoa(apiKey));

// ✅ 如需存储，使用加密
import CryptoJS from 'crypto-js';
const encrypted = CryptoJS.AES.encrypt(apiKey, secretKey).toString();
localStorage.setItem('token', encrypted);

2. 防止 Base64 注入

// 验证 Base64 格式
function isValidBase64(str) {
  const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
  if (!base64Regex.test(str)) return false;

  try {
    return btoa(atob(str)) === str;
  } catch (err) {
    return false;
  }
}

3. 限制大小

const MAX_BASE64_SIZE = 10 * 1024 * 1024; // 10MB

function safeBase64Decode(base64) {
  if (base64.length > MAX_BASE64_SIZE) {
    throw new Error('Base64 string too large');
  }
  return atob(base64);
}

实用工具代码

文件转 Base64

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const base64 = await fileToBase64(e.target.files[0]);
  console.log(base64);
  // data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
});

Base64 转 Blob

function base64ToBlob(base64, contentType = '') {
  const byteCharacters = atob(base64.split(',')[1]);
  const byteNumbers = new Array(byteCharacters.length);

  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }

  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: contentType });
}

// 使用
const blob = base64ToBlob(base64String, 'image/png');
const url = URL.createObjectURL(blob);

流式处理大文件

async function* base64Stream(file, chunkSize = 1024 * 1024) {
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const buffer = await chunk.arrayBuffer();
    const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
    yield base64;
    offset += chunkSize;
  }
}

// 使用
for await (const chunk of base64Stream(largeFile)) {
  // 处理每个 chunk
  sendToServer(chunk);
}

性能优化技巧

1. 使用 Web Workers

// worker.js
self.addEventListener('message', (e) => {
  const { data, action } = e.data;

  if (action === 'encode') {
    self.postMessage(btoa(data));
  } else if (action === 'decode') {
    self.postMessage(atob(data));
  }
});

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ action: 'encode', data: largeData });
worker.addEventListener('message', (e) => {
  console.log('Encoded:', e.data);
});

2. 缓存结果

const base64Cache = new Map();

function cachedBase64Encode(data) {
  if (base64Cache.has(data)) {
    return base64Cache.get(data);
  }

  const encoded = btoa(data);
  base64Cache.set(data, encoded);
  return encoded;
}

最后说几句我的看法

好了，坑都在上面了，祝你少踩。

相关阅读：

关于作者

ToolsForge 团队

了解我们

Base64 编码详解：原理、应用与最佳实践

Base64 编码详解：原理、应用与最佳实践

Base64 是什么？

为什么是 64？

先搞清楚：什么时候该用，什么时候别用

Base64 编码原理

编码过程

填充规则

编码 vs 加密：重要区别

Base64 的实际应用场景

1. 在 CSS/HTML 中嵌入图片

2. 邮件附件传输

3. JWT（JSON Web Tokens）

4. 存储二进制数据到文本数据库

5. Canvas 图片导出

Base64 变种

URL 安全的 Base64

MIME Base64

性能考虑

编码开销

何时避免使用 Base64

JavaScript 中的 Base64 操作

浏览器 API

处理中文（UTF-8）

Node.js 中的 Base64

安全注意事项

1. 不要用于敏感数据

2. 防止 Base64 注入

3. 限制大小

实用工具代码

文件转 Base64

Base64 转 Blob

流式处理大文件

性能优化技巧

1. 使用 Web Workers

2. 缓存结果

最后说几句我的看法

相关阅读

Web编码全解析：URL编码、Base64、Unicode深度指南

浏览器API完全指南：FileReader、Canvas、Web Workers深度解析

前端性能优化实战：从加载到渲染的完整指南

Base64 编码详解：原理、应用与最佳实践

Base64 编码详解：原理、应用与最佳实践

Base64 是什么？

为什么是 64？

先搞清楚：什么时候该用，什么时候别用

Base64 编码原理

编码过程

填充规则

编码 vs 加密：重要区别

Base64 的实际应用场景

1. 在 CSS/HTML 中嵌入图片

2. 邮件附件传输

3. JWT（JSON Web Tokens）

4. 存储二进制数据到文本数据库

5. Canvas 图片导出

Base64 变种

URL 安全的 Base64

MIME Base64

性能考虑

编码开销

何时避免使用 Base64

JavaScript 中的 Base64 操作

浏览器 API

处理中文（UTF-8）

Node.js 中的 Base64

安全注意事项

1. 不要用于敏感数据

2. 防止 Base64 注入

3. 限制大小

实用工具代码

文件转 Base64

Base64 转 Blob

流式处理大文件

性能优化技巧

1. 使用 Web Workers

2. 缓存结果

最后说几句我的看法

相关阅读

Web编码全解析：URL编码、Base64、Unicode深度指南