三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

uni-app多媒体处理：base64与二进制数据转换实践

发布时间：2026/8/9 3:33:20 三亩地 编程学习日记
uni-app多媒体处理：base64与二进制数据转换实践

1. uni.chooseMedia 基础功能解析

uni.chooseMedia 是 uni-app 框架提供的多媒体文件选择 API，主要用于从相册或相机获取图片、视频等媒体文件。这个 API 在移动端开发中应用广泛，特别是在需要用户上传图片或视频的场景下。

在实际开发中，我们经常需要处理获取到的媒体文件的二进制数据或 base64 编码格式。比如：

  • 需要将图片直接显示在页面上（使用 base64）
  • 需要将文件上传到服务器（使用二进制数据）
  • 需要对文件进行本地处理（如压缩、裁剪等）

注意：uni.chooseMedia 在不同平台的表现可能略有差异，iOS 和 Android 获取到的文件格式可能不同，需要做好兼容处理。

2. 获取 base64 格式数据的实现方案

2.1 通过 uni.getFileSystemManager 转换

最常用的方法是通过 uni.getFileSystemManager 读取文件并转换为 base64：

uni.chooseMedia({ count: 1, success: (res) => { const filePath = res.tempFiles[0].tempFilePath const fs = uni.getFileSystemManager() fs.readFile({ filePath: filePath, encoding: 'base64', success: (res) => { console.log('base64数据:', res.data) // 可以在这里使用base64数据 } }) } })

2.2 通过 canvas 转换图片

对于图片文件，还可以通过 canvas 来获取 base64：

const ctx = uni.createCanvasContext('myCanvas') ctx.drawImage(tempFilePath, 0, 0, width, height) ctx.draw(false, () => { uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { const fs = uni.getFileSystemManager() fs.readFile({ filePath: res.tempFilePath, encoding: 'base64', success: (res) => { console.log('canvas生成的base64:', res.data) } }) } }) })

2.3 性能优化建议

处理大文件时需要注意：

  1. base64 数据会比原始二进制大约 33%，内存占用较高
  2. 建议对大图片先进行压缩再转换为 base64
  3. 可以考虑使用 web worker 处理转换过程，避免阻塞主线程

3. 获取二进制数据的实现方案

3.1 直接获取 ArrayBuffer

uni-app 中可以通过以下方式获取二进制数据：

uni.chooseMedia({ count: 1, success: (res) => { const filePath = res.tempFiles[0].tempFilePath const fs = uni.getFileSystemManager() fs.readFile({ filePath: filePath, success: (res) => { // res.data 是 ArrayBuffer 格式的二进制数据 console.log('二进制数据:', res.data) } }) } })

3.2 二进制数据处理技巧

获取到二进制数据后，可以进行以下操作：

  1. 转换为 Blob 对象：
const blob = new Blob([new Uint8Array(arrayBuffer)])
  1. 上传到服务器：
uni.uploadFile({ url: 'https://example.com/upload', filePath: blob, name: 'file', success: (res) => { console.log('上传成功', res) } })
  1. 保存到本地：
const fs = uni.getFileSystemManager() fs.writeFile({ filePath: `${uni.env.USER_DATA_PATH}/tempfile`, data: arrayBuffer, success: () => { console.log('保存成功') } })

4. 常见问题与解决方案

4.1 base64 图片预览闪退问题

部分机型在预览 base64 图片时会出现闪退，解决方案：

  1. 检查 base64 前缀是否正确（应该是data:image/png;base64,或类似格式）
  2. 将 base64 先保存为临时文件再预览：
function previewBase64(base64Data) { const fs = uni.getFileSystemManager() const tempFilePath = `${uni.env.USER_DATA_PATH}/temp_preview` fs.writeFile({ filePath: tempFilePath, data: base64Data, encoding: 'base64', success: () => { uni.previewImage({ urls: [tempFilePath] }) } }) }

4.2 二进制文件损坏问题

处理二进制文件时可能会遇到文件损坏的情况，建议：

  1. 检查 ArrayBuffer 的字节长度是否符合预期
  2. 对于大文件，考虑分片处理
  3. 添加文件头校验（如 PNG 文件应以‰PNG开头）

4.3 跨平台兼容性问题

不同平台的注意事项：

  1. iOS 对 base64 字符串长度有限制，过长的字符串可能导致崩溃
  2. Android 某些版本对二进制文件操作有权限限制
  3. 微信小程序环境与非小程序环境的行为可能有差异

5. 性能优化与最佳实践

5.1 内存管理技巧

  1. 及时释放不再使用的 base64 或二进制数据
  2. 对于大文件，考虑使用流式处理而非一次性加载全部内容
  3. 可以使用uni.compressedImage先压缩图片再处理

5.2 文件类型处理建议

  1. 图片：优先考虑压缩和尺寸调整
  2. 视频：注意时长和分辨率限制
  3. 其他文件：检查 MIME 类型，确保正确处理

5.3 调试技巧

  1. 使用console.log输出数据长度和类型
  2. 在真机上测试，模拟器可能表现不同
  3. 使用 try-catch 捕获可能的异常

6. 实际应用场景示例

6.1 图片上传功能实现

完整的上传流程示例：

async function uploadImage() { try { // 1. 选择图片 const res = await uni.chooseMedia({ count: 1 }) const file = res.tempFiles[0] // 2. 压缩图片 const compressed = await uni.compressImage({ src: file.tempFilePath, quality: 80 }) // 3. 获取二进制数据 const fs = uni.getFileSystemManager() const arrayBuffer = await new Promise((resolve) => { fs.readFile({ filePath: compressed.tempFilePath, success: (res) => resolve(res.data) }) }) // 4. 上传 await uni.uploadFile({ url: 'https://example.com/upload', filePath: compressed.tempFilePath, name: 'image', formData: { userId: '123' } }) uni.showToast({ title: '上传成功' }) } catch (error) { console.error('上传失败', error) uni.showToast({ title: '上传失败', icon: 'none' }) } }

6.2 本地图片处理示例

对图片进行本地处理并保存：

function processAndSaveImage() { uni.chooseMedia({ count: 1, success: async (res) => { const filePath = res.tempFiles[0].tempFilePath // 创建canvas上下文 const ctx = uni.createCanvasContext('processCanvas') // 绘制图片到canvas ctx.drawImage(filePath, 0, 0, 300, 300) ctx.setFillStyle('red') ctx.fillRect(0, 0, 100, 100) // 保存处理后的图片 ctx.draw(false, () => { uni.canvasToTempFilePath({ canvasId: 'processCanvas', success: (res) => { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { uni.showToast({ title: '保存成功' }) } }) } }) }) } }) }

7. 高级技巧与扩展应用

7.1 二进制数据加密

可以对二进制数据进行简单加密：

function encryptArrayBuffer(arrayBuffer) { const uint8Array = new Uint8Array(arrayBuffer) for (let i = 0; i < uint8Array.length; i++) { uint8Array[i] ^= 0x55 // 简单的异或加密 } return uint8Array.buffer }

7.2 base64 数据隐藏

可以将 base64 数据隐藏在文本中：

function hideBase64InText(base64, text) { // 将base64数据编码后插入到文本中 return text.slice(0, text.length/2) + btoa(base64) + text.slice(text.length/2) }

7.3 WebAssembly 集成

对于需要高性能二进制处理的场景，可以考虑使用 WebAssembly：

// 假设已经加载了wasm模块 const wasmInstance = await loadWasmModule() function processWithWasm(arrayBuffer) { const memory = wasmInstance.exports.memory const uint8Array = new Uint8Array(memory.buffer) uint8Array.set(new Uint8Array(arrayBuffer), 0) wasmInstance.exports.processData(0, arrayBuffer.byteLength) return uint8Array.slice(0, arrayBuffer.byteLength).buffer }

8. 调试与问题排查指南

8.1 常见错误代码

  1. ERROR_FILE_NOT_FOUND：文件路径错误
  2. ERROR_INVALID_ARGUMENT：参数格式不正确
  3. ERROR_PERMISSION_DENIED：权限不足

8.2 调试工具推荐

  1. 使用uni.getSystemInfo获取设备信息
  2. 使用console.log输出中间结果
  3. 使用真机调试工具查看内存使用情况

8.3 性能监控

可以通过以下方式监控性能：

console.time('process') // 处理代码... console.timeEnd('process') // 输出处理耗时

9. 安全注意事项

  1. 不要将敏感信息以 base64 形式存储在客户端
  2. 处理用户上传的文件时要注意安全过滤
  3. 二进制数据处理时要防止内存溢出

10. 平台特定行为差异

10.1 微信小程序

  1. 有更严格的文件大小限制
  2. 需要配置域名白名单
  3. 某些 API 需要用户授权

10.2 H5 平台

  1. 可以使用更多浏览器原生 API
  2. 文件处理方式略有不同
  3. 没有小程序那样的严格限制

10.3 App 平台

  1. 可以访问更多系统功能
  2. 性能通常更好
  3. 需要处理更多权限问题
编程学习 学习日记 实战经验
← 返回列表