当前位置:首页 > 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
分享给朋友:

相关文章

vue实现懒加载的方法

vue实现懒加载的方法

vue实现懒加载的方法 使用Vue的<img>标签结合IntersectionObserver 在Vue组件中,通过IntersectionObserver监听图片是否进入视口,动态加载…

vue实现方法

vue实现方法

Vue 实现方法 Vue 是一种流行的前端框架,用于构建用户界面和单页应用。以下是几种常见的 Vue 实现方法: 创建 Vue 实例 通过 new Vue() 创建一个 Vue 实例,传入配置对象,…

vue实现懒加载的方法

vue实现懒加载的方法

Vue 实现懒加载的方法 路由懒加载 通过动态导入语法拆分路由组件,减少初始加载时间。适用于 Vue Router 配置: const routes = [ { path: '/hom…

vue 方法实现

vue 方法实现

Vue 方法实现指南 在 Vue 中,方法(methods)是组件中用于处理逻辑的函数集合。以下是实现 Vue 方法的详细指南。 定义方法 在 Vue 组件中,方法通过 methods 选项定义。每…

uniapp开发

uniapp开发

uniapp开发简介 uniapp是一款基于Vue.js的跨平台开发框架,支持一次开发,多端部署。开发者可以通过编写一套代码,发布到iOS、Android、Web以及各种小程序平台(如微信、支付宝、百…

uniapp教程

uniapp教程

uniapp 基础介绍 uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布(如微信小程序、H5、App、快应用等)。其核心优势在于代码复用率高,学习成本低,适合快速构建多…