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

目录

• 前言
• js实现base64编码的3种方式
• 应用场景总结及建议
• 关注我，不迷路

前言

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引入使用。
• 在vue中使用，用npm下载之后，直接用require引入使用：const Base64 = require('js-base64').Base64。
• 加密使用：Base64.encode('我是一段需要处理的字符')。
• 解密使用：Base64.decode('5oiR5piv5LiA5q616ZyA6KaB5aSE55CG55qE5a2X56ym')。

使用示例：

2. js内置方法进行转换

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

使用示例：

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

应用场景总结及建议

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

---

关注我，不迷路

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

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

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

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

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