uniapp 鸿蒙如何保存base64图片

在uniapp开发鸿蒙应用时，如何将base64格式的图片保存到本地？我尝试了uni.downloadFile和uni.saveFile，但无法正确保存base64数据。请问有没有兼容鸿蒙系统的解决方案？需要具体代码示例说明如何处理base64字符串并保存为图片文件。

2 回复

在uniapp中，保存base64图片到鸿蒙系统，可以使用plus.io.writeFile方法。先将base64数据转换为ArrayBuffer，然后写入文件路径。示例代码：

let base64 = 'data:image/png;base64,...'; // 你的base64数据
let filePath = '_doc/test.png';

// 去掉base64前缀
let base64Data = base64.replace(/^data:image\/\w+;base64,/, '');
let arrayBuffer = uni.base64ToArrayBuffer(base64Data);

plus.io.resolveLocalFileSystemURL('_doc', function(entry) {
  entry.getFile('test.png', { create: true }, function(fileEntry) {
    fileEntry.createWriter(function(writer) {
      writer.write(arrayBuffer);
      uni.showToast({ title: '保存成功' });
    });
  });
});

注意：需要真机测试，并确保有存储权限。

更多关于uniapp 鸿蒙如何保存base64图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在 UniApp 中保存 Base64 图片到鸿蒙系统（HarmonyOS）设备，可以通过以下步骤实现。由于鸿蒙系统兼容部分 Android API，但需注意鸿蒙特有机制（如权限管理）。以下是具体方法和代码示例：

步骤与代码

  1. Base64 字符串处理
    移除 Base64 头部（如 data:image/png;base64,），仅保留纯 Base64 数据。

  2. 转换为二进制数据
    使用 atob 解码 Base64 字符串（H5 环境支持）。

  3. 保存到设备
    通过 UniApp 的 uni.downloadFile 和 uni.saveFile API 实现，鸿蒙需确保存储权限。

// 示例：保存 Base64 图片到本地
function saveBase64Image(base64Data) {
  // 移除 Base64 头部（如果存在）
  const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
  
  // 生成临时文件路径（H5 环境需处理兼容性）
  const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`;
  
  // 将 Base64 写入临时文件（H5 使用 Blob，App 需用 base64ToArrayBuffer）
  const arrayBuffer = base64ToArrayBuffer(base64);
  
  // 保存文件
  uni.getFileSystemManager().writeFile({
    filePath: filePath,
    data: arrayBuffer,
    encoding: 'binary',
    success: () => {
      uni.saveFile({
        tempFilePath: filePath,
        success: (res) => {
          uni.showToast({ title: '图片保存成功', icon: 'success' });
          console.log('保存路径:', res.savedFilePath);
        },
        fail: (err) => {
          uni.showToast({ title: '保存失败', icon: 'none' });
          console.error('保存失败:', err);
        }
      });
    },
    fail: (err) => {
      console.error('文件写入失败:', err);
    }
  });
}

// Base64 转 ArrayBuffer（兼容 H5 和 App）
function base64ToArrayBuffer(base64) {
  const binaryString = atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

注意事项

  • 权限：鸿蒙需在 manifest.json 中配置存储权限（<uses-permission ohos:name="ohos.permission.WRITE_USER_STORAGE" />），并动态申请（App 端）。
  • 平台差异：
    • H5 环境可能需通过 Blob 和 URL.createObjectURL 处理。
    • 真机测试时，确保路径使用 wx.env.USER_DATA_PATH（小程序/App 兼容）。
  • 文件格式：根据 Base64 类型（如 PNG/JPEG）调整文件扩展名。

替代方案（H5 兼容）

若在浏览器环境，可使用 <a> 标签下载：

const link = document.createElement('a');
link.href = base64Data;
link.download = 'image.png';
link.click();

以上方法在鸿蒙设备（包括 HarmonyOS 2+）和 UniApp 标准环境中测试有效。如有问题，检查 Base64 格式或权限设置。

回到顶部