当前位置:首页 > uni-app

base64转换方法uniapp

2026-01-13 19:58:51uni-app

Base64 转换方法(UniApp)

在 UniApp 中实现 Base64 编码和解码,可以通过原生 JavaScript 的 btoaatob 方法,或使用第三方库如 base64-js。以下是具体实现方式:

使用原生 JavaScript 方法

Base64 编码(字符串转 Base64)

const text = 'Hello, UniApp!';
const base64String = btoa(unescape(encodeURIComponent(text)));
console.log(base64String); // 输出编码结果
  • encodeURIComponent 处理中文字符,unescapebtoa 完成转换。

Base64 解码(Base64 转字符串)

base64转换方法uniapp

const base64String = 'SGVsbG8sIFVuaUFwcCE=';
const decodedText = decodeURIComponent(escape(atob(base64String)));
console.log(decodedText); // 输出解码结果

使用 base64-js 库(推荐处理二进制数据)

  1. 安装库:

    npm install base64-js
  2. 编码与解码示例:

    base64转换方法uniapp

    
    import { toByteArray, fromByteArray } from 'base64-js';

// 字符串转 Base64 const text = 'Hello, UniApp!'; const bytes = new TextEncoder().encode(text); const base64String = fromByteArray(bytes); console.log(base64String);

// Base64 转字符串 const decodedBytes = toByteArray(base64String); const decodedText = new TextDecoder().decode(decodedBytes); console.log(decodedText);


---

#### 图片转 Base64(UniApp 示例)

使用 `uni.chooseImage` 选择图片并转换为 Base64:
```javascript
uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFile = res.tempFilePaths[0];
    uni.getFileSystemManager().readFile({
      filePath: tempFile,
      encoding: 'base64',
      success: (fileRes) => {
        console.log(fileRes.data); // 输出图片的 Base64 数据
      }
    });
  }
});

注意事项

  • 原生 btoaatob 不支持直接处理中文字符,需通过 encodeURIComponent 转换。
  • 处理二进制数据(如图片)时,推荐使用 base64-js 或 UniApp 原生 API。
  • 在浏览器环境中,可直接使用 FileReaderreadAsDataURL 方法。

标签: 方法uniapp
分享给朋友:

相关文章

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

uniapp adb

uniapp adb

在UniApp中使用ADB的方法 ADB(Android Debug Bridge)是Android开发中常用的调试工具,可用于UniApp项目的真机调试、日志查看等操作。以下是具体使用方法: 连接…

uniapp 表格导入

uniapp 表格导入

uniapp 表格导入的实现方法 使用 uni.chooseFile 选择文件 在 uniapp 中,可以通过 uni.chooseFile API 让用户选择本地文件。该 API 支持多平台,包括…

elementui uniapp

elementui uniapp

使用 Element UI 与 UniApp 结合的方法 Element UI 是一个基于 Vue.js 的桌面端组件库,而 UniApp 是一个跨平台开发框架。两者结合需要特殊处理,因为 Eleme…

uniapp多行注释

uniapp多行注释

uniapp多行注释方法 在UniApp中,多行注释的语法与JavaScript一致,可以使用以下两种方式实现多行注释。 方法一:使用/* */符号 通过/*开始注释,*/结束注释,中间的内…

uniapp 自动打包

uniapp 自动打包

uniapp 自动打包方法 uniapp 支持通过命令行或 CI/CD 工具实现自动化打包,适用于 H5、小程序、App 等平台。以下是常见的自动打包方式: H5 或小程序打包 使用 npm ru…