1***@qq.com
1***@qq.com
  • 发布:2023-02-11 15:57
  • 更新:2023-02-26 13:10
  • 阅读:992

VUE3下, 如何使用base64.js ?

分类:HBuilderX

在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  
  }  
}));  
2023-02-11 15:57 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

自已顶一下,希望有哪位大哥指点一下.

1***@qq.com

1***@qq.com (作者)

再顶一下, 希望有哪位大哥指点一下.

哈哈柚

哈哈柚

  • 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 (作者)

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

1***@qq.com (作者)

本人小白,

折腾几天了, 实在是不会改这个base64.js输出格式export,

我尝试过: 最后一行加上 export default Base64

也不行.报错提示: The requested module '/pages/index/base64.js' does not provide an export named 'Base64'

恳请大家指点一下!

1***@qq.com

1***@qq.com (作者)

插件市场中下载排名第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(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;  
  };  

  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(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);  
        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;  
};

要回复问题请先登录注册