首页 前端知识 base64编码:js实现base64编码的3种方式,多场景下分析使用

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

2024-03-12 00:03:31 前端知识 前端哥 646 781 我要收藏

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内置方法进行转换

// btoa():字符串或二进制值转为Base64编码
// atob():Base64编码转为原来的编码
// 字符串转base64
export function baseToa(str) {
  // 对字符串进行编码
  var encode = encodeURI(str)
  // 对编码的字符串转化base64
  var base64 = btoa(encode)
  return base64
}

// base64转字符串
export function strTob(base64) {
  // 对base64转编码
  var decode = atob(base64)
  // 编码转字符串
  var str = decodeURI(decode)
  return str
}

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下载,直接引入使用。
 

此文章内容来自对以下文章的整合:
base64编码:js实现base64编码的3种方式,多场景下分析使用_js base64_上网的虫不叫网虫的博客-CSDN博客
字符串与base64相互转化_base64转字符串_Jim-zf的博客-CSDN博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3637.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!