uniapp base64编码与解码的使用方法

在uniapp中如何正确使用base64编码与解码功能？我尝试了多种方法但总出现乱码或格式错误，请问有没有完整的示例代码？具体应该引用哪些API，以及在编码解码过程中有哪些注意事项？

2 回复

在uni-app中，使用uni.base64ToArrayBuffer()将Base64字符串转为ArrayBuffer，用uni.arrayBufferToBase64()将ArrayBuffer转回Base64。适用于图片处理等场景。


在 UniApp 中，Base64 编码和解码可以通过 JavaScript 内置方法实现，无需额外安装插件。以下是具体使用方法：

Base64 编码

使用 btoa() 方法将字符串转换为 Base64 编码：

let originalString = 'Hello, UniApp!';
let encodedString = btoa(originalString);
console.log(encodedString); // 输出: "SGVsbG8sIFVuaUFwcCE="

Base64 解码

使用 atob() 方法将 Base64 字符串解码回原始内容：

let base64String = 'SGVsbG8sIFVuaUFwcCE=';
let decodedString = atob(base64String);
console.log(decodedString); // 输出: "Hello, UniApp!"

注意事项

  1. 中文处理：直接使用 btoa 编码中文可能出错，需先进行 UTF-8 转码：

    function encodeBase64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode('0x' + p1)));
}
function decodeBase64(str) {
  return decodeURIComponent(atob(str).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
}

// 使用示例
let chineseText = '你好UniApp';
let encoded = encodeBase64(chineseText);
let decoded = decodeBase64(encoded);

  2. 二进制数据：处理图片等二进制数据时，可通过 uni.getFileSystemManager().readFile() 读取文件并设置 encoding: 'base64'。

这些方法在 UniApp 的 Vue 页面或 JavaScript 模块中均可直接使用。

回到顶部