uni-app在VUE3下, 如何使用base64.js?
uni-app在VUE3下, 如何使用base64.js?
在VUE2下面, 可以使用以下 base64.js (标准档)
使用方法:
(先申明一下Base64 )
const Base64 = require('./base64.js').Base64; //这里这样引用一下, 其它单元就直接用Base64.encode
然后就可以用了:
console.log(Base64.encode('xxxx'));
console.log(Base64.decode('eHh4eA=='));
但是,在VUE3下, 上述方法行不通. 会报错.
请问一下, 我该如何书写?
/*
* base64.js
*
* Licensed under the BSD 3-Clause License.
* http://opensource.org/licenses/BSD-3-Clause
*
* References:
* http://en.wikipedia.org/wiki/Base64
*/
;
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ?
module.exports = factory(global) :
typeof define === 'function' && define.amd ?
define(factory) : factory(global)
}((typeof self !== 'undefined' ? self :
typeof window !== 'undefined' ? window :
typeof global !== 'undefined' ? global :
this),
function(global) {
'use strict';
// existing version for noConflict()
global = global || {};
var _Base64 = global.Base64;
var version = "2.5.1";
// if node.js and NOT React Native, we use Buffer
var buffer;
if (typeof module !== 'undefined' && module.exports) {
try {
buffer = eval("require('buffer').Buffer");
} catch (err) {
buffer = undefined;
}
}
// constants
var b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var b64tab = function(bin) {
var t = {};
for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;
return t;
}(b64chars);
var fromCharCode = String.fromCharCode;
// encoder stuff
var cb_utob = function(c) {
if (c.length < 2) {
var cc = c.charCodeAt(0);
return cc < 0x80 ? c :
cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6)) +
fromCharCode(0x80 | (cc & 0x3f))) :
(fromCharCode(0xe0 | ((cc >>> 12) & 0x0f)) +
fromCharCode(0x80 | ((cc >>> 6) & 0x3f)) +
fromCharCode(0x80 | (cc & 0x3f)));
} else {
var cc = 0x10000 +
(c.charCodeAt(0) - 0xD800) * 0x400 +
(c.charCodeAt(1) - 0xDC00);
return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07)) +
fromCharCode(0x80 | ((cc >>> 12) & 0x3f)) +
fromCharCode(0x80 | ((cc >>> 6) & 0x3f)) +
fromCharCode(0x80 | (cc & 0x3f)));
}
};
var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;
var utob = function(u) {
return u.replace(re_utob, cb_utob);
};
var cb_encode = function(ccc) {
var padlen = [0, 2, 1][ccc.length % 3],
ord = ccc.charCodeAt(0) << 16 |
((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8) |
((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),
chars = [
b64chars.charAt(ord >>> 18),
b64chars.charAt((ord >>> 12) & 63),
padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),
padlen >= 1 ? '=' : b64chars.charAt(ord & 63)
];
return chars.join('');
};
var btoa = global.btoa ? function(b) {
return global.btoa(b);
} : function(b) {
return b.replace(/[\s\S]{1,3}/g, cb_encode);
};
var _encode = buffer ?
buffer.from && Uint8Array && buffer.from !== Uint8Array.from ?
function(u) {
return (u.constructor === buffer.constructor ? u : buffer.from(u))
.toString('base64')
} :
function(u) {
return (u.constructor === buffer.constructor ? u : new buffer(u))
.toString('base64')
} :
function(u) {
return btoa(utob(u))
};
var encode = function(u, urisafe) {
return !urisafe ?
_encode(String(u)) :
_encode(String(u)).replace(/[+\/]/g, function(m0) {
return m0 == '+' ? '-' : '_';
}).replace(/=/g, '');
};
var encodeURI = function(u) {
return encode(u, true)
};
// decoder stuff
var re_btou = new RegExp([
'[\xC0-\xDF][\x80-\xBF]',
'[\xE0-\xEF][\x80-\xBF]{2}',
'[\xF0-\xF7][\x80-\xBF]{3}'
].join('|'), 'g');
var cb_btou = function(cccc) {
switch (cccc.length) {
case 4:
var cp = ((0x07 & cccc.charCodeAt(0)) << 18) |
((0x3f & cccc.charCodeAt(1)) << 12) |
((0x3f & cccc.charCodeAt(2)) << 6) |
(0x3f & cccc.charCodeAt(3)),
offset = cp - 0x10000;
return (fromCharCode((offset >>> 10) + 0xD800) +
fromCharCode((offset & 0x3FF) + 0xDC00));
case 3:
return fromCharCode(
((0x0f & cccc.charCodeAt(0)) << 12) |
((0x3f & cccc.charCodeAt(1)) << 6) |
(0x3f & cccc.charCodeAt(2))
);
default:
return fromCharCode(
((0x1f & cccc.charCodeAt(0)) << 6) |
(0x3f & cccc.charCodeAt(1))
);
}
};
var btou = function(b) {
return b.replace(re_btou, cb_btou);
};
var cb_decode = function(cccc) {
var len = cccc.length,
padlen = len % 4,
n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 :
0) |
(len > 1 ? b64tab[cccc.charAt(1)] << 12 :
0) |
(len > 2 ? b64tab[cccc.charAt(2)] << 6 :
0) |
(len > 3 ? b64tab[cccc.charAt(3)] : 0),
chars = [
fromCharCode(n >>> 16),
fromCharCode((n >>> 8) & 0xff),
fromCharCode(n & 0xff)
];
chars.length -= [0, 0, 2, 1][padlen];
return chars.join('');
};
var _atob = global.atob ? function(a) {
return global.atob(a);
} : function(a) {
return a.replace(/\S{1,4}/g, cb_decode);
};
var atob = function(a) {
return _atob(String(a).replace(/[^A-Za-z0-9\+\/]/g, ''));
};
var _decode = buffer ?
buffer.from && Uint8Array && buffer.from !== Uint8Array.from ?
function(a) {
return (a.constructor === buffer.constructor ?
a : buffer.from(a, 'base64')).toString();
} :
function(a) {
return (a.constructor === buffer.constructor ?
a : new buffer(a, 'base64')).toString();
} :
function(a) {
return btou(_atob(a))
};
var decode = function(a) {
return _decode(
String(a).replace(/[-_]/g, function(m0) {
return m0 == '-' ? '+' : '/'
})
.replace(/[^A-Za-z0-9\+\/]/g, '')
);
};
var noConflict = function() {
var Base64 = global.Base64;
global.Base64 = _Base64;
return Base64;
};
// export Base64
global.Base64 = {
VERSION: version,
atob: atob,
btoa: btoa,
fromBase64: decode,
toBase64: encode,
utob: utob,
encode: encode,
encodeURI: encodeURI,
btou: btou,
decode: decode,
noConflict: noConflict,
__buffer__: buffer
};
// if ES5 is available, make Base64.extendString() available
if (typeof Object.defineProperty === 'function') {
var noEnum = function(v) {
return {
value: v,
enumerable: false,
writable: true,
configurable: true
};
};
global.Base64.extendString = function() {
Object.defineProperty(
String.prototype, 'fromBase64', noEnum(function() {
return decode(this)
}));
Object.defineProperty(
String.prototype, 'toBase64', noEnum(function(urisafe) {
return encode(this, urisafe)
}));
Object.defineProperty(
String.prototype, 'toBase64URI', noEnum(function() {
return encode(this, true)
}));
};
}
//
// export Base64 to the namespace
//
if (global['Meteor']) { // Meteor.js
Base64 = global.Base64;
}
// module.exports and AMD are mutually exclusive.
// module.exports has precedence.
if (typeof module !== 'undefined' && module.exports) {
module.exports.Base64 = global.Base64;
} else if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function() {
return global.Base64
});
}
// that's it!
return {
Base64: global.Base64
}
}));
自已顶一下,希望有哪位大哥指点一下.
再顶一下, 希望有哪位大哥指点一下.
https://www.npmjs.com/package/js-base64
import { Base64 } from ‘js-base64’;
Base64.encode(‘xxx’)
这个,和我贴中中说的base64.js是基本一样的,
我测试了你这个版, const Base64 = require(’./base64.js’).Base64;
VUE3中, 编译到:
17:40:18.113 项目 ‘XXXX’ 编译成功。前端运行日志,请另行在浏览器的控制台查看。 17:40:18.115 点击控制台右上角debug图标(红色虫子),可开启断点调试(添加断点:双击编辑器行号添加断点) 17:40:18.116 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232 17:40:18.117 ready in 2841ms.
右侧内置浏览器显示一个空白窗.
改为VUE2就可以正常执行.
回复 1***@qq.com: import { Base64 } from ‘js-base64’;
哪位大哥, 可以提供支持 VUE3下的BASE64 格式文件?
base64.js最后一行加上 export default Base64 然后用import导出
改为仅保留es模块导出即可
大哥, 请问一下如何导出es模块? (本人小白, 恳请指点)
本人小白,
折腾几天了, 实在是不会改这个base64.js输出格式export,
我尝试过: 最后一行加上 export default Base64
也不行.报错提示: The requested module ‘/pages/index/base64.js’ does not provide an export named ‘Base64’
恳请大家指点一下!
只在H5上用?
插件市场中下载排名第1的JS-BASE64中的,base64.js好像不行
.(我是小白,可能结论有错,欢迎指正)
我自已根据网上搜到的,整理如下:
摘自"青衣浏阳"CSDN博客: https://blog.csdn.net/m0_49016709/article/details/111475416
已在真机上,内置浏览器上,都正常执行结果!
支持VUE3,非常省事.
function kBase64Encode(input) {
function _utf8_encode(string) {
string = string.replace(/\r\n/g, “\n”);
var utftext = “”;
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode©;
} 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;
};
if (!input) {
console.log(“请传入要加密的值”);
return;
};
var _keyStr = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=”;
var output = “”;
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
};
// public method for decoding
function kBase64Decode(input) {
function _utf8_decode(utftext) {
var string = “”;
var i = 0;
let c = 0,
c1 = 0,
c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode©;
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);
c1 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c1 & 63));
i += 3;
}
}
return string;
};
if (!input) {
console.log(“请传入要解密的值”);
return;
};
var _keyStr = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=”;
var output = “”;
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9+/=]/g, “”);
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
};
在uni-app中使用Vue 3并结合base64.js进行编码和解码操作,可以通过以下步骤实现。首先,确保你已经安装了base64.js库。如果还没有安装,可以通过npm或yarn进行安装:
npm install base64.js --save
# 或者
yarn add base64.js --save
接下来,在你的uni-app项目中,你可以按照以下步骤来使用base64.js进行编码和解码操作。
1. 引入base64.js库
在你的Vue组件中引入base64.js库。由于base64.js提供了一个全局的Base64
对象,你可以直接通过import
语句来引入它。
<script setup>
import Base64 from 'base64.js';
// 创建一个Base64编码器实例
const encoder = new Base64.Encoder();
// 创建一个Base64解码器实例
const decoder = new Base64.Decoder();
// 要编码的字符串
const originalString = "Hello, uni-app with Vue 3!";
// 使用编码器将字符串编码为Base64
const encodedString = encoder.write(originalString).toString();
// 要解码的Base64字符串
const encodedInput = encodedString; // 这里使用上面编码后的字符串作为输入
// 使用解码器将Base64字符串解码为原始字符串
const decodedString = decoder.write(encodedInput).toString();
console.log("Original String:", originalString);
console.log("Encoded String:", encodedString);
console.log("Decoded String:", decodedString);
</script>
2. 在模板中显示结果(可选)
如果你想在模板中显示编码和解码的结果,可以将这些结果绑定到模板变量上。
<template>
<view>
<text>Original String: {{ originalString }}</text>
<text>Encoded String: {{ encodedString }}</text>
<text>Decoded String: {{ decodedString }}</text>
</view>
</template>
<script setup>
// 上面的JavaScript代码放在这里
// 为了在模板中使用,将变量暴露出去
const originalString = "Hello, uni-app with Vue 3!";
const encodedString = encoder.write(originalString).toString();
const decodedString = decoder.write(encodedString).toString();
</script>
注意事项
- 确保base64.js库已经正确安装并导入。
- 在实际项目中,编码和解码操作可能需要放在合适的生命周期钩子或方法中,例如
onMounted
或事件处理函数中。 - 上述代码示例是基于Vue 3的
<script setup>
语法糖,如果你使用的是标准的<script>
标签,则需要稍微调整代码结构。
通过以上步骤,你就可以在uni-app的Vue 3项目中成功使用base64.js进行编码和解码操作了。