当前位置：首页 > news >正文

HarmonyOS NEXT——【鸿蒙相册图片以及文件上传Picker封装】

news 来源：原创 2025/5/16 5:29:53

1、鸿蒙系统文件/图片上传base64：

鸿蒙应用需要上传图片或者文件时，由于更高的安全性与更严谨的访问权限，通常无法直接从系统相册或文件管理中直接上传，因此我们可以通过picker对象去拉起相册访问的能力，引导用户选择需要上传的一张图片或者一份文件，将其写入沙箱，从而通过沙箱路径间接达到了上传的效果。

效果（上传图片）：

效果（上传文件）：

参考代码封装：

import { fileIo as fs, picker } from '@kit.CoreFileKit';
import util from '@ohos.util';
import { photoAccessHelper } from '@kit.MediaLibraryKit';

export class GetSystemFileUtils {
  static async getBase64Files(fileType: string) {
    return new Promise<GetFileType>(async (resolve, reject) => {

      let filePath = ''
      if(fileType == '.png' || fileType == '.jpg'){
        //选择图片类型进行上传
        const photoSelectOption = new photoAccessHelper.PhotoSelectOptions();
        photoSelectOption.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
        photoSelectOption.maxSelectNumber = 1; // 选择媒体文件的最大数目
        // 打开相册选择图片
        const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
        const photoSelectResult = await photoViewPicker.select(photoSelectOption)
        // 文件操作
        // 获取照片的uri地址
         filePath = photoSelectResult.photoUris[0]
      }
      else {
        //选择文件类型进行上传（例如：.txt、.pdf等）
        let filePicker = new picker.DocumentViewPicker();
        let result = await filePicker.select();
         filePath = result[0]
      }

      //选择的文件格式不符合
      let selectFilType = filePath.split('.').pop()
      if ('.' + selectFilType !== fileType) {
        reject()
      }
       //获取沙箱路径
      const file = fs.openSync(filePath)
      const stat = fs.statSync(file.fd)
      const buffer = new ArrayBuffer(stat.size)
      fs.readSync(file.fd, buffer)
      fs.closeSync(file)

      // 转成base64编码的字符串
      const helper = new util.Base64Helper()
      const base64Res = helper.encodeToStringSync(new Uint8Array(buffer))
      // }
      let startIndex = filePath.lastIndexOf('/') + 1;

      // 找到文件名中最后一个'.'的索引位置
      let endIndex = filePath.lastIndexOf('.');

      // 截取字符串
      let utfUriFileName = filePath.slice(startIndex, endIndex);
      //解码
      let fileTitle = decodeURIComponent(utfUriFileName);
      let FileContent: GetFileType = {
        base64File: base64Res,
        fileTitle: fileTitle
      }
      resolve(FileContent)

    })
  }
}

interface GetFileType {
  base64File: string
  fileTitle: string
}

调用类

GetSystemFileUtils.getBase64Files(fileType).then((base64Files) => {
//获取到结果，文件名以及base64格式的文件。根据需求自行上传处理
  context.sendBridgeResult({ fileBase64: base64Files.base64File, fileName: base64Files.fileTitle })
})
  .catch(() => {
    WindowUtils.showToast({ message: "只支持" + fileType + "格式文件" })
  })