HarmonyOS鸿蒙Next中如何将base64格式图片保存到沙箱目录

HarmonyOS鸿蒙Next中如何将base64格式图片保存到沙箱目录 如何将base64格式图片，保存到沙箱目录。
我需要拿着这个沙箱目录的图片然后上传服务器。

5 回复

1、先将base64字符串转为buffer

async base64ToArrayBuffer(base64Str: string): Promise<ArrayBuffer> {
  const base64 = new util.Base64Helper();
  const uint8Array: Uint8Array = await base64.decode(base64Str);
  return uint8Array.buffer;
}

2、将buffer写入沙箱cache目录

async writeToCacheDir(arrayBuffer: ArrayBuffer) {
  const cacheDir = this.getUIContext().getHostContext()?.cacheDir || ''
  const filePath = cacheDir + '/test.jpeg'
  const dest = await fileIo.open(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
  await fileIo.write(dest.fd, arrayBuffer)
  await fileIo.close(dest.fd)
}

3、上传到服务器

rcp 或者 http 均可

更多关于HarmonyOS鸿蒙Next中如何将base64格式图片保存到沙箱目录的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


解决思路：

一、将base64字符串解码为Uint8Array

  • 使用 util.Base64Helper.decodeSync() 或 decode() 方法将base64字符串解码为Uint8Array数据。

二、将Uint8Array保存到应用沙箱目录

  • 使用文件系统API将解码后的数据写入沙箱文件。

三：从沙箱目录上传到服务器

  • 使用 request.uploadFile() 接口将文件上传到服务器。

注意：

  1. base64格式处理：
    • 如果base64字符串包含 data:image/jpeg;base64, 前缀，需要先去除前缀再进行解码
    • 根据base64编码类型选择正确的解码格式（BASIC/MIME等）
  2. 沙箱路径格式：
    • 相对路径："./image.jpg"
    • internal协议："internal://cache/image.jpg"
    • 绝对路径："/data/storage/el2/base/files/image.jpg"
    • file协议："file://com.example.app/data/storage/el2/base/files/image.jpg"
  3. 上传配置：
    • 需要 ohos.permission.INTERNET 权限

示例：

base64图片→沙箱文件→服务器上传

import { request } from '@kit.NetworkKit';

//xxx.ets
private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const base64Str = ''

//调用
this.saveAndUploadBase64Image(this.context,base64Str)

async function saveAndUploadBase64Image(context: common.UIAbilityContext, base64Str: string) {
  // 1. 解码base64
  let base64Helper = new util.Base64Helper();
  let pureBase64 = base64Str.replace(/^data:image\/\w+;base64,/, '');
  let imageData = base64Helper.decodeSync(pureBase64, util.Type.BASIC);
  
  // 2. 保存到沙箱
  let filePath = context.filesDir + '/upload_image.jpg';
  let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
  fs.writeSync(file.fd, imageData.buffer);
  fs.closeSync(file.fd);
  
  // 3. 上传到服务器
  let uploadConfig: request.UploadConfig = {
    url: ' https://your-server.com/upload',
    files: [{
      filename: 'image.jpg',
      path: filePath,
      contentType: 'image/jpeg'
    }]
  };
  
  try {
    let task = await request.uploadFile(context, uploadConfig);
    console.info('Upload task created');
  } catch (error) {
    console.error(`Upload failed: ${JSON.stringify(error)}`);
  }
}

base64已经是字符串了啊，为啥还有写入文件再上传？

直接通过参数传给服务器不就行了？

在HarmonyOS Next中，使用@ohos.file.fs模块的write方法可将Base64图片保存到沙箱目录。首先，通过context.filesDir获取沙箱路径，然后使用base64模块解码Base64字符串为Unit8Array，最后调用fs.write写入文件。

在HarmonyOS Next中，将Base64格式的图片保存到沙箱目录，主要涉及Base64字符串解码和文件系统操作。以下是核心步骤和代码示例：

1. 获取沙箱目录路径

首先，需要获取应用沙箱内的文件目录路径。

import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';

// 在Ability或UIAbility的上下文中获取文件目录
let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
let sandboxDir: string = context.filesDir; // 应用沙箱文件路径

2. 解码Base64并写入文件

将Base64字符串解码为ArrayBuffer，然后通过文件系统API写入沙箱目录。

import buffer from '@ohos.buffer';

// 假设 base64String 是你的Base64图片数据
let base64String: string = '...'; // 你的Base64字符串，需去除前缀（如'data:image/png;base64,'）
let fileName: string = 'image.png';
let filePath: string = sandboxDir + '/' + fileName;

try {
  // 解码Base64字符串为ArrayBuffer
  let arrayBuffer: ArrayBuffer = buffer.from(base64String, 'base64').buffer;
  
  // 创建并写入文件
  let file: fs.File = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
  fs.writeSync(file.fd, arrayBuffer);
  fs.closeSync(file);
  
  console.info('图片保存成功，路径：', filePath);
} catch (error) {
  console.error('保存失败：', error);
}

3. 上传服务器

获取文件路径后，可使用@ohos.net.http或其他网络模块上传。

import http from '@ohos.net.http';
import fs from '@ohos.file.fs';

let uploadUrl: string = 'https://your-server.com/upload';
let httpRequest = http.createHttp();

// 读取文件为ArrayBuffer
let fileArrayBuffer: ArrayBuffer = fs.readSync(filePath);

let options: http.HttpRequestOptions = {
  method: http.RequestMethod.POST,
  header: { 'Content-Type': 'application/octet-stream' },
  extraData: fileArrayBuffer
};

httpRequest.request(uploadUrl, options)
  .then((response: http.HttpResponse) => {
    console.info('上传成功：', response.result);
  })
  .catch((error: Error) => {
    console.error('上传失败：', error);
  });

注意事项

  • Base64处理：确保Base64字符串不包含data:image/png;base64,等前缀，需提前去除。
  • 文件格式：根据实际图片类型（如PNG、JPEG）设置正确文件名和后缀。
  • 权限配置：网络上传需在module.json5中配置ohos.permission.INTERNET权限。
  • 错误处理：文件操作和网络请求需添加try-catch或异步捕获。

以上代码提供了从Base64解码、沙箱保存到服务器上传的完整流程，可直接在HarmonyOS Next项目中使用。

回到顶部