当前位置:首页 > 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怎么使用

安装与开发环境搭建 下载HBuilderX作为开发工具,这是官方推荐的IDE,内置uniapp项目模板和调试工具。安装后通过新建项目选择uniapp模板,支持Vue.js语法。确保Node.js环境已…

jquery的方法

jquery的方法

jQuery 常用方法分类 jQuery 是一个快速、简洁的 JavaScript 库,提供了大量简化 DOM 操作、事件处理、动画效果和 AJAX 交互的方法。以下是 jQuery 核心方法的分类和…

uniapp部署到服务器

uniapp部署到服务器

部署准备 确保本地开发环境已完成项目构建,生成静态文件(H5端为/dist/build/h5目录)。检查服务器环境是否安装Nginx/Apache等Web服务软件,并配置好域名解析。 上传文件 通过…

uniapp悬浮

uniapp悬浮

实现悬浮效果的方法 在UniApp中实现悬浮效果可以通过CSS的position: fixed或position: sticky属性结合动态样式控制来实现。以下是具体实现方式: 使用CSS固定定位…

uniapp 搜索

uniapp 搜索

uniapp 搜索功能实现方法 全局搜索组件集成 在pages.json中配置全局搜索栏,适用于所有页面顶部显示搜索框。示例代码: "globalStyle": { "navigationBa…

uniapp市场库

uniapp市场库

uniapp市场库概述 uniapp市场库通常指与uniapp开发框架相关的插件、模板、组件等资源的集合。这些资源可以帮助开发者快速构建跨平台应用,包括小程序、H5、App等。市场库中的内容由社区开发…