vue base64 文件、图片解密

原创最新推荐文章于 2026-09-20 11:42:55 发布 2.7k 阅读 AI写同款

小孙爱出bug

码龄5年墨衍会员 · AI 创作全网分发

73粉丝9篇原创

关注

Base64的加密与解密最近对网络安全的兴趣猛涨，闲着没逝，给大家整一期Base64的加密与解密。阅读详情

AI摘要

本文介绍了Base64编码的基本概念及其应用，包括如何通过Base64处理文本文件和图片数据，并提供了具体的JavaScript代码示例。

文章目

前言
一、base64
二、解密
- 1.文件
- 2.图片
总结

前言

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>` 标签，并在页面上展示这些图片。