HarmonyOS 鸿蒙Next H5调用APP图库选择图片后file://转换成File文件方法

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next H5调用APP图库选择图片后file://转换成File文件方法 现在有APP内嵌H5页面需要调用APP图片选择功能,当选择图片后转换成File文件然后返回给前端H5。

2 回复

可以读取路径,拿到图片数据后base64编码,使用runJavascript传给H5端展示

有个Demo,可以看下

import web_webview from '@ohos.web.webview'
import { common } from '@kit.AbilityKit'
import { uri, util } from '@kit.ArkTS'
import fs from '@ohos.file.fs';
import picker from '@ohos.file.picker'
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  base64Str: string

  constructor(base64Str:string) {
    this.base64Str=base64Str;
  }

  test(): string {
    return "2123";
  }

  toString(): void {
    console.log('Web Component toString');
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State uris: Array<string> = []
  @State base64Str : string = ""
  @State testObj: testClass = new testClass(this.base64Str);
  aboutToAppear() {
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }
  build() {
    Column() {

      Web({ src: $rawfile('TestonShowFileSelector.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked')
          const photoSelectOptions = new picker.PhotoSelectOptions();
          photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
          photoSelectOptions.maxSelectNumber = 8;
          const photoViewPicker = new picker.PhotoViewPicker();
          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
            this.uris = photoSelectResult.photoUris;
            let file1 = fs.openSync(this.uris[0])
            let array:ArrayBuffer = new ArrayBuffer(fs.statSync(file1.fd).size)
            fs.readSync(file1.fd,array)
            let unit = new Uint8Array(array)
            let base64 = new util.Base64Helper();
            let mystr = base64.encodeToStringSync(unit);
            this.base64Str = "myFunction( \"" + mystr + "\")"
            this.controller.runJavaScript(this.base64Str)
            console.info('photoViewPicker.select to file succeed and uris are:' + this.uris);
          }).catch((err: BusinessError) => {
            console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })

          return false

        })

    }
  }
}

更多关于HarmonyOS 鸿蒙Next H5调用APP图库选择图片后file://转换成File文件方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next H5环境中,当你从APP图库选择图片后,通常会得到一个file://开头的URL。为了将这个URL转换成File文件对象,你可以使用以下步骤:

  1. 获取文件URL:首先确保你已经从图库选择图片并获取到了其file://格式的URL。

  2. 解析URL:解析该URL以获取文件的实际路径。在鸿蒙系统中,你可能需要处理路径的特定格式,这通常涉及去除file://前缀,并处理可能存在的特殊字符或路径格式。

  3. 使用鸿蒙API转换:鸿蒙系统提供了文件操作的API,你可以使用这些API将路径转换为File对象。这通常涉及调用鸿蒙的文件管理或IO相关API,如File类的构造函数,直接传入解析后的路径字符串。

  4. 示例代码(伪代码,具体实现需参考鸿蒙开发文档):

    let fileUrl = 'file:///path/to/your/image.jpg';
    let filePath = fileUrl.replace('file://', ''); // 解析路径
    let file = new File(filePath); // 转换为File对象(注意:这里的File类需参考鸿蒙实际API)

请注意,上述代码为简化示例,实际开发中需根据鸿蒙系统的具体API进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!