uni-app在VUE3下, 如何使用base64.js?

发布于 1周前 作者 gougou168 来自 Uni-App

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

19 回复

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


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

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’
恳请大家指点一下!

插件市场中下载排名第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进行编码和解码操作了。

回到顶部