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

上网的虫不叫网虫

70932人浏览 · 2021-12-14 10:52:29

上网的虫不叫网虫 · 2021-12-14 10:52:29 发布

前言

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);
}