HarmonyOS 鸿蒙Next H5调用APP图库选择图片后file://转换成File文件方法
HarmonyOS 鸿蒙Next H5调用APP图库选择图片后file://转换成File文件方法 现在有APP内嵌H5页面需要调用APP图片选择功能,当选择图片后转换成File文件然后返回给前端H5。
可以读取路径,拿到图片数据后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
文件对象,你可以使用以下步骤:
-
获取文件URL:首先确保你已经从图库选择图片并获取到了其
file://
格式的URL。 -
解析URL:解析该URL以获取文件的实际路径。在鸿蒙系统中,你可能需要处理路径的特定格式,这通常涉及去除
file://
前缀,并处理可能存在的特殊字符或路径格式。 -
使用鸿蒙API转换:鸿蒙系统提供了文件操作的API,你可以使用这些API将路径转换为
File
对象。这通常涉及调用鸿蒙的文件管理或IO相关API,如File
类的构造函数,直接传入解析后的路径字符串。 -
示例代码(伪代码,具体实现需参考鸿蒙开发文档):
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