上代码
// 使用 const base64 = new Base64Code() const str = '你好' const en = base64.enCode(str) const de = base64.deCode(en) console.log(en, 'base64编码') // 5L2g5aW9 console.log(de, 'base64解码') // 你好
|| 中文也可以进行编码, 里面已经对数据UTF-8转码再base64编码
// base64函数
function Base64Code() {
// base64 character set, plus padding character (=)
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// Regular expression to check formal correctness of base64 encoded strings
b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
// 转UTF-8格式编码 private method for UTF-8 encoding
const utf8Encode = function (str) {
let string = str;
string = string.replace(/\r\n/g, '\n');
let utfText = '';
for (let n = 0; n < string.length; n++) {
const c = string.charCodeAt(n);
if (c < 128) {
utfText += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utfText += String.fromCharCode((c >> 6) | 192);
utfText += String.fromCharCode((c & 63) | 128);
} else {
utfText += String.fromCharCode((c >> 12) | 224);
utfText += String.fromCharCode(((c >> 6) & 63) | 128);
utfText += String.fromCharCode((c & 63) | 128);
}
}
return utfText;
};
// 解UTF-8格式编码 private method for UTF-8 decoding
const utf8Decode = function (utfText) {
let string = '';
let i = 0;
let c = 0;
let c2 = 0;
let c3 = 0;
while (i < utfText.length) {
c = utfText.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if ((c > 191) && (c < 224)) {
c2 = utfText.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utfText.charCodeAt(i + 1);
c3 = utfText.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
};
// base64编码
this.enCode = function(string) {
string = utf8Encode(String(string));
var bitmap, a, b, c,
result = "",
i = 0,
rest = string.length % 3; // To determine the final padding
for (; i < string.length;) {
if ((a = string.charCodeAt(i++)) > 255 ||
(b = string.charCodeAt(i++)) > 255 ||
(c = string.charCodeAt(i++)) > 255)
throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
bitmap = (a << 16) | (b << 8) | c;
result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63) +
b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);
}
// If there's need of padding, replace the last 'A's with equal signs
return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
};
// base64解码
this.deCode = function(string) {
// atob can work with strings with whitespaces, even inside the encoded part,
// but only \t, \n, \f, \r and ' ', which can be stripped.
string = String(string).replace(/[\t\n\f\r ]+/g, "");
if (!b64re.test(string))
throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
// Adding the padding if missing, for semplicity
string += "==".slice(2 - (string.length & 3));
var bitmap, result = "",
r1, r2, i = 0;
for (; i < string.length;) {
bitmap = b64.indexOf(string.charAt(i++)) << 18 | b64.indexOf(string.charAt(i++)) << 12 |
(r1 = b64.indexOf(string.charAt(i++))) << 6 | (r2 = b64.indexOf(string.charAt(i++)));
result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) :
r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) :
String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);
}
return utf8Decode(result);
};
}
本文描述了三种前端实现base64解码和编码的方法
Base64 在线编码解码工具 https://base64.us/
btoa 和 atob 是window对象上的两个函数，window.atob()解码，window.btoa()编码
let encodeText = 'xiaxiayaoguai' let decodeText = 'eGlheGlheWFvZ3VhaQ==' console.log(atob(decodeText)) // xiaxiayaoguai console.log(btoa(encodeText)) // eGlheGlheWFvZ3VhaQ==
Unicode字符编码报错
这里我们将encodeText = '霞霞要乖'再进行解码就会出现以下报错，因为btoa不支持Unicode字符编码
Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.
报错解决办法：
encodeURIComponent对字符串进行编，再用btoa进行Base64编码；atob对Base64编码的串进行解码，再用decodeURIComponent对字符串进行解码let encodeText = '霞霞要乖' let decodeText = 'JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2' console.log(btoa(encodeURIComponent(encodeText))) // JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2 console.log(decodeURIComponent(atob(decodeText))) // 霞霞要乖
下包
npm install --save js-base64
使用
<script>
import {Base64} from 'js-base64' // 引入
export default {
data() {
return {
encodeText:'霞霞要乖',
decodeText:'6Zye6Zye6KaB5LmW',
}
},
created(){
this.transformBase64()
},
methods: {
transformBase64(){
console.log('编码：', Base64.encode(this.encodeText)) // 6Zye6Zye6KaB5LmW
console.log('解码：', Base64.decode(this.decodeText)) // 霞霞要乖
}
}
}
</script>
构建函数
let Base64 = {
keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(e) {
let t = "";
let n, r, i, s, o, u, a;
let f = 0;
e = Base64._utf8_encode(e);
while (f < e.length) {
n = e.charCodeAt(f++);
r = e.charCodeAt(f++);
i = e.charCodeAt(f++);
s = n >> 2;
o = (n & 3) << 4 | r >> 4;
u = (r & 15) << 2 | i >> 6;
a = i & 63;
if (isNaN(r)) {
u = a = 64
} else if (isNaN(i)) {
a = 64
}
t = t + this.keyStr.charAt(s) + this.keyStr.charAt(o) + this.keyStr.charAt(u) + this.keyStr.charAt(a)
}
return t
},
decode: function(e) {
let t = "";
let n, r, i;
let s, o, u, a;
let f = 0;
e = e.replace(/[^A-Za-z0-9+/=]/g, "");
while (f < e.length) {
s = this.keyStr.indexOf(e.charAt(f++));
o = this.keyStr.indexOf(e.charAt(f++));
u = this.keyStr.indexOf(e.charAt(f++));
a = this.keyStr.indexOf(e.charAt(f++));
n = s << 2 | o >> 4;
r = (o & 15) << 4 | u >> 2;
i = (u & 3) << 6 | a;
t = t + String.fromCharCode(n);
if (u != 64) {
t = t + String.fromCharCode(r)
}
if (a != 64) {
t = t + String.fromCharCode(i)
}
}
t = Base64._utf8_decode(t);
return t
},
_utf8_encode: function(e) {
e = e.replace(/rn/g, "n");
let t = "";
for (let n = 0; n < e.length; n++) {
let r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r)
} else if (r > 127 && r < 2048) {
t += String.fromCharCode(r >> 6 | 192);
t += String.fromCharCode(r & 63 | 128)
} else {
t += String.fromCharCode(r >> 12 | 224);
t += String.fromCharCode(r >> 6 & 63 | 128);
t += String.fromCharCode(r & 63 | 128)
}
}
return t
},
_utf8_decode: function(e) {
let t = "";
let n = 0;
let r = c1 = c2 = 0;
while (n < e.length) {
r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r);
n++
} else if (r > 191 && r < 224) {
c2 = e.charCodeAt(n + 1);
t += String.fromCharCode((r & 31) << 6 | c2 & 63);
n += 2
} else {
c2 = e.charCodeAt(n + 1);
c3 = e.charCodeAt(n + 2);
t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
n += 3
}
}
return t
}
}
使用
let encodeText = '霞霞要乖' let decodeText = '6Zye6Zye6KaB5LmW' console.log(Base64.encode(encodeText)) // 6Zye6Zye6KaB5LmW console.log(Base64.decode(decodeText)) // 霞霞要乖
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
