1. uni.chooseMedia 基础功能解析uni.chooseMedia 是 uni-app 框架提供的多媒体文件选择 API主要用于从相册或相机获取图片、视频等媒体文件。这个 API 在移动端开发中应用广泛特别是在需要用户上传图片或视频的场景下。在实际开发中我们经常需要处理获取到的媒体文件的二进制数据或 base64 编码格式。比如需要将图片直接显示在页面上使用 base64需要将文件上传到服务器使用二进制数据需要对文件进行本地处理如压缩、裁剪等注意uni.chooseMedia 在不同平台的表现可能略有差异iOS 和 Android 获取到的文件格式可能不同需要做好兼容处理。2. 获取 base64 格式数据的实现方案2.1 通过 uni.getFileSystemManager 转换最常用的方法是通过 uni.getFileSystemManager 读取文件并转换为 base64uni.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 来获取 base64const 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 性能优化建议处理大文件时需要注意base64 数据会比原始二进制大约 33%内存占用较高建议对大图片先进行压缩再转换为 base64可以考虑使用 web worker 处理转换过程避免阻塞主线程3. 获取二进制数据的实现方案3.1 直接获取 ArrayBufferuni-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 二进制数据处理技巧获取到二进制数据后可以进行以下操作转换为 Blob 对象const blob new Blob([new Uint8Array(arrayBuffer)])上传到服务器uni.uploadFile({ url: https://example.com/upload, filePath: blob, name: file, success: (res) { console.log(上传成功, res) } })保存到本地const fs uni.getFileSystemManager() fs.writeFile({ filePath: ${uni.env.USER_DATA_PATH}/tempfile, data: arrayBuffer, success: () { console.log(保存成功) } })4. 常见问题与解决方案4.1 base64 图片预览闪退问题部分机型在预览 base64 图片时会出现闪退解决方案检查 base64 前缀是否正确应该是data:image/png;base64,或类似格式将 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 二进制文件损坏问题处理二进制文件时可能会遇到文件损坏的情况建议检查 ArrayBuffer 的字节长度是否符合预期对于大文件考虑分片处理添加文件头校验如 PNG 文件应以‰PNG开头4.3 跨平台兼容性问题不同平台的注意事项iOS 对 base64 字符串长度有限制过长的字符串可能导致崩溃Android 某些版本对二进制文件操作有权限限制微信小程序环境与非小程序环境的行为可能有差异5. 性能优化与最佳实践5.1 内存管理技巧及时释放不再使用的 base64 或二进制数据对于大文件考虑使用流式处理而非一次性加载全部内容可以使用uni.compressedImage先压缩图片再处理5.2 文件类型处理建议图片优先考虑压缩和尺寸调整视频注意时长和分辨率限制其他文件检查 MIME 类型确保正确处理5.3 调试技巧使用console.log输出数据长度和类型在真机上测试模拟器可能表现不同使用 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 常见错误代码ERROR_FILE_NOT_FOUND文件路径错误ERROR_INVALID_ARGUMENT参数格式不正确ERROR_PERMISSION_DENIED权限不足8.2 调试工具推荐使用uni.getSystemInfo获取设备信息使用console.log输出中间结果使用真机调试工具查看内存使用情况8.3 性能监控可以通过以下方式监控性能console.time(process) // 处理代码... console.timeEnd(process) // 输出处理耗时9. 安全注意事项不要将敏感信息以 base64 形式存储在客户端处理用户上传的文件时要注意安全过滤二进制数据处理时要防止内存溢出10. 平台特定行为差异10.1 微信小程序有更严格的文件大小限制需要配置域名白名单某些 API 需要用户授权10.2 H5 平台可以使用更多浏览器原生 API文件处理方式略有不同没有小程序那样的严格限制10.3 App 平台可以访问更多系统功能性能通常更好需要处理更多权限问题 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 读取文件并转换为 base64uni.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 来获取 base64const 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 性能优化建议处理大文件时需要注意base64 数据会比原始二进制大约 33%内存占用较高建议对大图片先进行压缩再转换为 base64可以考虑使用 web worker 处理转换过程避免阻塞主线程3. 获取二进制数据的实现方案3.1 直接获取 ArrayBufferuni-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 二进制数据处理技巧获取到二进制数据后可以进行以下操作转换为 Blob 对象const blob new Blob([new Uint8Array(arrayBuffer)])上传到服务器uni.uploadFile({ url: https://example.com/upload, filePath: blob, name: file, success: (res) { console.log(上传成功, res) } })保存到本地const fs uni.getFileSystemManager() fs.writeFile({ filePath: ${uni.env.USER_DATA_PATH}/tempfile, data: arrayBuffer, success: () { console.log(保存成功) } })4. 常见问题与解决方案4.1 base64 图片预览闪退问题部分机型在预览 base64 图片时会出现闪退解决方案检查 base64 前缀是否正确应该是data:image/png;base64,或类似格式将 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 二进制文件损坏问题处理二进制文件时可能会遇到文件损坏的情况建议检查 ArrayBuffer 的字节长度是否符合预期对于大文件考虑分片处理添加文件头校验如 PNG 文件应以‰PNG开头4.3 跨平台兼容性问题不同平台的注意事项iOS 对 base64 字符串长度有限制过长的字符串可能导致崩溃Android 某些版本对二进制文件操作有权限限制微信小程序环境与非小程序环境的行为可能有差异5. 性能优化与最佳实践5.1 内存管理技巧及时释放不再使用的 base64 或二进制数据对于大文件考虑使用流式处理而非一次性加载全部内容可以使用uni.compressedImage先压缩图片再处理5.2 文件类型处理建议图片优先考虑压缩和尺寸调整视频注意时长和分辨率限制其他文件检查 MIME 类型确保正确处理5.3 调试技巧使用console.log输出数据长度和类型在真机上测试模拟器可能表现不同使用 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 常见错误代码ERROR_FILE_NOT_FOUND文件路径错误ERROR_INVALID_ARGUMENT参数格式不正确ERROR_PERMISSION_DENIED权限不足8.2 调试工具推荐使用uni.getSystemInfo获取设备信息使用console.log输出中间结果使用真机调试工具查看内存使用情况8.3 性能监控可以通过以下方式监控性能console.time(process) // 处理代码... console.timeEnd(process) // 输出处理耗时9. 安全注意事项不要将敏感信息以 base64 形式存储在客户端处理用户上传的文件时要注意安全过滤二进制数据处理时要防止内存溢出10. 平台特定行为差异10.1 微信小程序有更严格的文件大小限制需要配置域名白名单某些 API 需要用户授权10.2 H5 平台可以使用更多浏览器原生 API文件处理方式略有不同没有小程序那样的严格限制10.3 App 平台可以访问更多系统功能性能通常更好需要处理更多权限问题