js實(shí)現(xiàn)base64編碼，前端一般應(yīng)用場(chǎng)景在與后端接口參數(shù)中體現(xiàn)，后端可能需要某個(gè)字段是base64編碼的字符，這時(shí)候就需要用前端的方法進(jìn)行轉(zhuǎn)換，再作為參數(shù)傳遞到服務(wù)端。
js實(shí)現(xiàn)base64編碼的3種方式
1. 使用base64.js進(jìn)行轉(zhuǎn)換
獲取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內(nèi)置方法進(jìn)行轉(zhuǎn)換
// btoa()：字符串或二進(jìn)制值轉(zhuǎn)為Base64編碼
// atob()：Base64編碼轉(zhuǎn)為原來的編碼
// 字符串轉(zhuǎn)base64
export function baseToa(str) {
? // 對(duì)字符串進(jìn)行編碼
? var encode = encodeURI(str)
? // 對(duì)編碼的字符串轉(zhuǎn)化base64
? var base64 = btoa(encode)
? return base64
}
// base64轉(zhuǎn)字符串
export function strTob(base64) {
? // 對(duì)base64轉(zhuǎn)編碼
? var decode = atob(base64)
? // 編碼轉(zhuǎn)字符串
? var str = decodeURI(decode)
? return str
}
3. node環(huán)境內(nèi)置方法進(jìn)行轉(zhuǎn)換
node中自帶的base64的編碼與解碼分為三種：普通字符串/十六進(jìn)制/圖片
- 普通字符串
//編碼
new Buffer(String).toString('base64');
//解碼
new Buffer(base64Str, 'base64').toString();
- 十六進(jìn)制
//編碼
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);
}
應(yīng)用場(chǎng)景總結(jié)及建議
如果考慮到ie10及其以下低版本兼容性，使用第一種引入base64.js的方式；
如果是移動(dòng)端項(xiàng)目或不考慮ie低版本兼容，直接使用第二種js內(nèi)置方法進(jìn)行轉(zhuǎn)換，簡單粗暴；
如果是在node環(huán)境中使用，就需要用到第三種方式；
如果是在vue項(xiàng)目中使用，推薦使用第一種，使用npm下載，直接引入使用。
?文章來源：http://www.zghlxwxcb.cn/news/detail-600550.html
此文章內(nèi)容來自對(duì)以下文章的整合：
base64編碼：js實(shí)現(xiàn)base64編碼的3種方式，多場(chǎng)景下分析使用_js base64_上網(wǎng)的蟲不叫網(wǎng)蟲的博客-CSDN博客
字符串與base64相互轉(zhuǎn)化_base64轉(zhuǎn)字符串_Jim-zf的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-600550.html
到了這里，關(guān)于base64編碼：js實(shí)現(xiàn)base64編碼的3種方式，多場(chǎng)景下分析使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
