前言
Base64是一种二进制到文本的编码方式。如果要更具体一点的话,可以认为它是一种将 byte数组编码为字符串的方法,而且编码出的字符串只包含ASCII基础字符。
例如字符串ShuSheng007对应的Base64为U2h1U2hlbmcwMDc=。其中那个=比较特殊,是填充符,一会再说。
值得注意的是Base64不是加密算法,其仅仅是一种编码方式,算法也是公开的,所以不能依赖它进行加密。
一、为什么叫Base64?
因为它是基于(Base)64个字符的一种编码方式。使用其编码后的文本只包含64个ASCII码字符(偶尔加一个填充字符=
),如下所示:
Base64使用到的64个字符:
A-Z
26个a-z
26个0-9
10个+
1个/
1个
二、解密
1.文件
代码如下(示例):
var url = "data:text/plain;charset=utf-8;base64," + res.data.data; var a = document.createElement("a"); a.href = url; a.download = `${list[0].sendNo}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a);
这段代码是用来创建一个下载链接,让用户可以下载一个文本文件。
解释:
1. `var url = "data:text/plain;charset=utf-8;base64," + res.data.data;`:这一行代码创建了一个包含文本数据的 Base64 编码的数据 URL。这个 URL 的类型是纯文本 (`text/plain`),字符编码是 UTF-8。`res.data.data` 可能是从某个地方获取的文本数据。
2. `var a = document.createElement("a");`:这一行代码创建了一个 `<a>` 元素,即超链接元素。
3. `a.href = url;`:这一行代码将刚刚创建的超链接的 `href` 属性设置为之前生成的包含文本数据的数据 URL。
4. `a.download = `${list[0].sendNo}-批次码.txt`;`:这一行代码设置了下载属性,指定了用户下载文件时默认的文件名。`${list[0].sendNo}` 可能是从 `list` 数组中获取的某个值。
5. `document.body.appendChild(a);`:这一行代码将刚刚创建的 `<a>` 元素添加到文档的 `<body>` 元素中。
6. `a.click();`:这一行代码模拟用户点击这个超链接,从而触发文件下载。
7. `document.body.removeChild(a);`:这一行代码在文件下载完成后,从文档中移除这个 `<a>` 元素。
总的来说,这段代码的作用是在页面上动态生成一个下载链接,让用户点击后可以下载一个文本文件。
2.图片
代码如下(示例):
<img
style="width: 100%; height: 100%"
v-for="(item, index) in imgList"
:key="index"
:src="'data:image/png;base64,' + item"
alt=""
/>
这段代码是用来在页面上展示一组 Base64 编码的 PNG 图片。
解释:
1. `<img>`:这是 HTML 中用来显示图片的标签。
2. `style="width: 100%; height: 100%"`:这段代码设置了图片的宽度和高度都为父元素的 100%,即图片会填充父元素的宽度和高度。
3. `v-for="(item, index) in imgList" :key="index"`:这段代码使用 Vue.js 中的 `v-for` 指令,遍历 `imgList` 数组中的每个元素,将每个元素赋值给 `item`,并使用 `index` 作为唯一的 key。
4. `:src="'data:image/png;base64,' + item"`:这段代码动态设置了每个 `<img>` 标签的 `src` 属性,将 Base64 编码的图片数据添加到 `data:image/png;base64,` 的前缀后面。这样浏览器就可以直接解析这段 Base64 编码的数据并显示图片。
5. `alt=""`:这是图片的替代文本,当图片无法显示时会显示这段文本。
总的来说,这段代码会根据 `imgList` 数组中的每个 Base64 编码的 PNG 图片数据,动态生成对应的 `<img>` 标签,并在页面上展示这些图片。
总结
js
- const encodedData = btoa("Hello, world"); // 加密
- const decodedData = atob(encodedData); // 解密
文件: "data:text/plain;charset=utf-8;base64,"
图片: "'data:image/png;base64,'