base64编码：js实现base64编码的3种方式，多场景下分析使用

最新推荐文章于 2024-03-17 09:53:56 发布

上网的虫不叫网虫

最新推荐文章于 2024-03-17 09:53:56 发布

阅读量5.9w

点赞数 18

分类专栏： JS VUE plugin 文章标签： javascript 前端 npm node base64

本文链接：https://blog.csdn.net/qq_42961150/article/details/121922216

版权

JS 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

VUE

16 篇文章 4 订阅

订阅专栏

plugin

5 篇文章 0 订阅

订阅专栏

前言

js实现base64编码，前端一般应用场景在与后端接口参数中体现，后端可能需要某个字段是base64编码的字符，这时候就需要用前端的方法进行转换，再作为参数传递到服务端。

js实现base64编码的3种方式

1. 使用base64.js进行转换

获取base64.js，可以直接搜索base64.js下载。推荐使用npm下载：npm install --save js-base64，下载后在node_modules文件夹下面就能找到需要的base64.js。
在普通的html文件中使用：直接将js引入使用<script src="base64.js"></script>。
在vue中使用，用npm下载之后，直接用require引入使用：const Base64 = require('js-base64').Base64。
加密使用：Base64.encode('我是一段需要处理的字符')。
解密使用：Base64.decode('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym')。

使用示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="plugin/base64.js"></script>
		<script type="text/javascript">
			const str = '我是一段需要处理的字符';
			console.log(Base64.encode(str))
			console.log(Base64.decode('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym'))
		</script>
	</body>
</html>

2. js内置方法进行转换

加密使用：window.btoa(unescape(encodeURIComponent('我是一段需要处理的字符')))
解密使用：decodeURIComponent(escape(window.atob('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym')))
注意：1. 该方式只是兼容ie10及其以上，做移动端项目或者对ie低版本兼容没要求，这种方式适用；2. 该方式需要将字符串先编码才能进行转base64，否则中文字符串会报错。

使用示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = '我是一段需要处理的字符';
			var encodedData = window.btoa(unescape(encodeURIComponent(str))); // 编码
			var decodedData = decodeURIComponent(escape(window.atob('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym'))); // 解码
			console.log(encodedData, decodedData)
		</script>
	</body>
</html>

3. node环境内置方法进行转换

node中自带的base64的编码与解码分为三种：普通字符串/十六进制/图片

普通字符串

//编码
new Buffer(String).toString('base64');
//解码
new Buffer(base64Str, 'base64').toString();

十六进制

//编码
new Buffer(String, 'base64').toString('hex');
//解码
new Buffer(base64Str, 'hex').toString('utf8');

图片

const fs = require('fs');
//编码
function base64_encode(file) {
    let bitmap = fs.readFileSync(file);
    return new Buffer(bitmap).toString('base64');
}
//解码
function base64_decode(base64str, file) {
    var bitmap = new Buffer(base64str, 'base64');
    fs.writeFileSync(file, bitmap);
}

应用场景总结及建议

如果考虑到ie10及其以下低版本兼容性，使用第一种引入base64.js的方式；
如果是移动端项目或不考虑ie低版本兼容，直接使用第二种js内置方法进行转换，简单粗暴；
如果是在node环境中使用，就需要用到第三种方式；
如果是在vue项目中使用，推荐使用第一种，使用npm下载，直接引入使用。

关注我，不迷路

小伙伴，用你可爱的小手，点个赞，关注我了解更多知识！！！

如果任何疑问的可以在评论区留言或者私聊。

也可以扫下面二维码加我wx，备注‘地区-名字-技术类型’，我会拉进我的微信技术分享群。注意：必须备注清楚哈。

也可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。

更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

上网的虫不叫网虫

关注

18
点赞
踩
75

收藏

觉得还不错? 一键收藏
打赏
3
评论
base64编码：js实现base64编码的3种方式，多场景下分析使用

js实现base64编码，前端一般应用场景在与后端接口参数中体现，后端可能需要某个字段是base64编码的字符，这时候就需要用前端的方法进行转换，再作为参数传递到服务端。
复制链接

扫一扫