在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
}
}));
8 个回复
1***@qq.com (作者)
自已顶一下,希望有哪位大哥指点一下.
1***@qq.com (作者)
再顶一下, 希望有哪位大哥指点一下.
哈哈柚
https://www.npmjs.com/package/js-base64
1***@qq.com (作者)
这个,和我贴中中说的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就可以正常执行.
2023-02-23 17:42
哈哈柚
回复 1***@qq.com: import { Base64 } from 'js-base64';
2023-02-23 19:58
1***@qq.com (作者)
1***@qq.com (作者)
哪位大哥, 可以提供支持 VUE3下的BASE64 格式文件?
浅屿
base64.js最后一行加上 export default Base64 然后用import导出
2023-02-24 14:27
深海智行 - 专注前端培训
改为仅保留es模块导出即可
1***@qq.com (作者)
大哥, 请问一下如何导出es模块? (本人小白, 恳请指点)
2023-02-24 16:25
1***@qq.com (作者)
本人小白,
折腾几天了, 实在是不会改这个base64.js输出格式export,
我尝试过: 最后一行加上 export default Base64
也不行.报错提示: The requested module '/pages/index/base64.js' does not provide an export named 'Base64'
恳请大家指点一下!
陌上华年
只在H5上用?
2023-02-25 15:11
1***@qq.com (作者)
插件市场中下载排名第1的JS-BASE64中的,base64.js好像不行
.(我是小白,可能结论有错,欢迎指正)
我自已根据网上搜到的,整理如下:
摘自"青衣浏阳"CSDN博客: https://blog.csdn.net/m0_49016709/article/details/111475416
已在真机上,内置浏览器上,都正常执行结果!
支持VUE3,非常省事.