开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情
Base 编码系列包括 Base64 Base32 Base16。其中，Base64 编码是使用 64 位 ASCII 字符将数据编码成 ASCII 字符串，结尾用 “=” 等号作为后缀
base64 常用于处理文本数据的场合，比如登录时传输密码时进行加密，图片也通常会使用 Base64 的形式加载或者存储（这样渲染时就不需要额外请求外部资源）
base64 索引表如下：
那么，base64 该如何进行编码和解码？
方法一：window 对象的 btoa 和 atob
btoa 和 atob 是window对象的两个函数，这表示我们可以不需要引入第三方的内容就可以直接使用。
1. 编码 btoa
将 ASCII 字符串或二进制数据转换成 base64 编码的字符串
let str = "hello";
console.log(btoa(str));
运行结果：
注：编码时不支持 Unicode 字符，比如下面这段代码，执行后会出现报错：
2. 解码 atob
将 base64 编码的字符串进行解码
let str = "aGVsbG8=";
console.log(atob(str));
运行结果：
3、中文字符编码解决方案
使用 JavaScript 的全局函数：
- encodeURIComponent()：把字符串作为URI 组件进行编码
- decodeURIComponent()：对 encodeURIComponent() 函数编码的 URI 进行解码
var s = btoa(encodeURIComponent("你好"));
console.log(s)
编码：
将上面获取的编码进行解码：
var s = decodeURIComponent(atob("JUU0JUJEJUEwJUU1JUE1JUJE"));
console.log(s)
方法二：js-base64
安装js-base64依赖
npm install js-base64 --save
引入：
import Base64 from 'js-base64'
Vue.use(Base64)
编码和解码：
Base64.encode(str);
Base64.decode(str);
图片的 base64
正常情况下，网页上图片需要 http 请求来下载，将图片转成 base64 字符串后，加载页面时可以节省 http 请求的数量（但是会增加 css 文件的大小）
