一、base64编码
目的:出于数据加密的目的或者网络协议的限制或者特殊字符的处理等,通常需要将原文转换为base64编码,比如:前台传递的SQL、特殊参数、发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。
二、使用方式
1.直接应用js-base64库(推荐)
(1)安装依赖
- Js中安装依赖
//方式一 :
//1.手动下载依赖包
//2.直接引入,例如:
<script src="base64.js"></script>
//方式二:直接从官网引入
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
- ES6中安装依赖
//安装依赖
//方式一(推荐)
npm install --save js-base64
//方式二
npm install base-64 --save
//方式三
yarn add base-64
(2)引入依赖
- ES6
import { Base64 } from 'js-base64';
//或者
// or if you prefer no Base64 namespace
import { encode, decode } from 'js-base64';
- node.js (commonjs)
const {Base64} = require('js-base64');
//您还可以使用ESM来import代替require
require=require('esm')(module);
import {Base64} from 'js-base64';
(3).使用案例
- 概要
let latin = 'dankogai';
let utf8 = '小飼弾'
let u8s = new Uint8Array([100,97,110,107,111,103,97,105]);
//1.加密
Base64.encode(latin); // ZGFua29nYWk=
Base64.encode(latin, true)); // ZGFua29nYWk 跳过填充
Base64.encodeURI(latin)); // ZGFua29nYWk
Base64.btoa(latin); // ZGFua29nYWk=
Base64.btoa(utf8); // 引发异常
Base64.fromUint8Array(u8s); // ZGFua29nYWk=
Base64.fromUint8Array(u8s, true); // ZGFua29nYW 这是 URI 安全的
Base64.encode(utf8); // 5bCP6aO85by+
Base64.encode(utf8, true) // 5bCP6aO85by-
Base64.encodeURI(utf8); // 5bCP6aO85by-
//2.解密
Base64.decode( 'ZGFua29nYWk=');// dankogai
Base64.decode( 'ZGFua29nYWk'); // dankogai
Base64.atob( 'ZGFua29nYWk=');// dankogai
Base64.atob( '5bCP6aO85by+');// 'å°�飼弾' 这是无意义的
Base64.toUint8Array('ZGFua29nYWk=');// u8s above
Base64.decode( '5bCP6aO85by+');// 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors ==> 注意 .decodeURI() 是不必要的
Base64.decode( '5bCP6aO85by-');// 小飼弾
- 内置扩展
// you have to explicitly extend String.prototype
Base64.extendString();
// once extended, you can do the following
'dankogai'.toBase64(); // ZGFua29nYWk=
'小飼弾'.toBase64(); // 5bCP6aO85by+
'小飼弾'.toBase64(true); // 5bCP6aO85by-
'小飼弾'.toBase64URI(); // 5bCP6aO85by- ab alias of .toBase64(true)
'小飼弾'.toBase64URL(); // 5bCP6aO85by- an alias of .toBase64URI()
'ZGFua29nYWk='.fromBase64(); // dankogai
'5bCP6aO85by+'.fromBase64(); // 小飼弾
'5bCP6aO85by-'.fromBase64(); // 小飼弾
'5bCP6aO85by-'.toUint8Array();// u8s above
// 你必须显式地扩展 Uint8Array.prototype
Base64.extendUint8Array();
// 一旦扩展,您可以执行以下
u8s.toBase64(); // 'ZGFua29nYWk='
u8s.toBase64URI(); // 'ZGFua29nYWk'
u8s.toBase64URL(); // 'ZGFua29nYWk' an alias of .toBase64URI()
Base64.toBase64(str);
// 一次性扩展所有
Base64.extendBuiltins()
- decode() vs .atob (and .encode() vs btoa())
假设你有:
var pngBase64 =
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
这是 Base64 编码的 1x1 透明 PNG,请勿使用 Base64.decode(pngBase64). 使用Base64.atob(pngBase64)来代替。 Base64.decode()解码为 UTF-8 字符串,同时Base64.atob()解码为字节,这与浏览器内置兼容atob()(node.js 中不存在)。相同的规则适用于相反的方向。
或者甚至更好,Base64.toUint8Array(pngBase64)。
可参考:快速通道
2.直接使用window.btoa() 编码,使用window.atob() 解码
案例:
注意:此方式只支持ASCII 编码 ,如果编码中有中文或者sql中的特殊字符等则会报错:The string to be encoded contains characters outside of the Latin1 range…
如果要对中文进行编码转换,需要通过如下方式进行
//编码
window.btoa(unescape(encodeURIComponent('个人个人个人和')))
//解码
decodeURIComponent(escape(window.atob('5Liq5Lq65Liq5Lq65Liq5Lq65ZKM'))))