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

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

---

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

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

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

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

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