JS 中 Base64 编码中文乱码问题

发表于 分类于 阅读次数： Valine： 本文字数： 837 阅读时长 ≈ 1 分钟

Base64 编码

Base64 是一组相似的 二进制到文本（binary-to-text） 的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME数据传输编码。

Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂的数据时使用。

上一段话引自 MDN Web Docs，用来解析 Base64 编码有点抽象。有一篇文章讲得比较好，想知道原理的可以看看 Base64编码原理分析。

使用编码的原因？

因为项目需要，在前端调后端接口时，需要对传值进行 Base64 编码，同时要对后端返回的部分数据进行 Base64 解码。在 JS 中，有 2 个函数 atob 和 btoa 分别用于 Base64 解码和编码工作。

然而，当要编码和解码的内容涉及到中文时，这两个方法就不能正常工作了，会抛出以下异常。

1
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

解决方法

可以借助 encodeURIComponent 和 decodeURIComponent 转义中文字符，直接给代码。

1
2
3
4
> window.btoa(encodeURIComponent('中文'))
< "JUU0JUI4JUFEJUU2JTk2JTg3"
> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
< "中文"