中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
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() //定义一个全局的string类型的数组,用来存放通过picker拉起后选择完图片后图片的uri @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(); // 过滤选择媒体文件类型为IMAGE_VIDEO_TYPE photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; // 选择媒体文件的最大数目 photoSelectOptions.maxSelectNumber = 8; //let uris: Array<string> = []; 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);//file://media/Photo/11/IMG_1713942933_005/IMG_20240424_151353.jpg }).catch((err: BusinessError) => { console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`); }) return false //----调用文件管理器----------------- // console.log('MyFileUploader onShowFileSelector invoked') // const documentSelectOptions = new picker.DocumentSelectOptions(); // // 选择媒体文件的最大数目 // documentSelectOptions.maxSelectNumber = 2; // const documentViewPicker = new picker.DocumentViewPicker(); // documentViewPicker.select(documentSelectOptions).then((DocumentSelectResult: Array<string>) => { // this.uris = DocumentSelectResult; // 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 ////-----相机-------------------------------- // const context = getContext(this) as common.UIAbilityContext // context.startAbilityForResult({ // action:"ohos.want.action.imageCapture", // parameters:{ // callBundleName:"com.hm.imageshow" // } // }).then((res)=>{ // console.log("testTag - " +JSON.stringify(res)); // let str:string = res.want?.parameters!["resourceUri"] as string // console.log("str"+str);//file://media/Photo/11/IMG_1713942933_005/IMG_20240424_151353.jpg // let fd = fs.openSync(str).fd // this.uris[0] = str // let arr:ArrayBuffer = new ArrayBuffer(128) // fs.readSync(fd,arr) // console.log("testTag - " + str); // // }) //return false }) } } } <form id="upload-form" enctype="multipart/form-data"> <!-- 修改type属性为camera --> <input type="file" id="upload" name="upload" accept="image/*" capture="camera" /> <!-- 添加一个图片元素用于展示图片 --> <img id="preview"/> </form> <div id="155134"></div>