中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
//WebviewUploadPiker.ets import web_webview from '@ohos.web.webview' import picker from '@ohos.file.picker' @Entry @Component struct WebviewUploadPiker { controller: web_webview.WebviewController = new web_webview.WebviewController() //定义一个全局的string类型的数组,用来存放通过picker拉起后选择完图片后图片的uri @State uris: Array<string> = [] aboutToAppear() { web_webview.WebviewController.setWebDebuggingAccess(true); } build() { Column() { Image(this.uris[0]).width(100).height(100) //用来展示选择的图片 Image(this.uris[1]).width(100).height(100) Web({ src: $rawfile('local/pikerPhoto.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.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择媒体文件的最大数目 photoSelectOptions.maxSelectNumber = 2; //let uris: Array<string> = []; const photoViewPicker = new picker.PhotoViewPicker(); return false }) } } } //photoPiker.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> <script> window.onload = function() { // 获取文件输入元素 var fileInput = document.getElementById('upload'); // 监听文件输入的改变事件 fileInput.addEventListener('change', function(e) { // 获取选中的文件 var file = e.target.files[0]; // 创建一个FileReader对象 var reader = new FileReader(); // 定义文件读取完成后的回调函数 reader.onloadend = function() { // 获取图片元素 var img = document.getElementById('preview'); // 将读取到的结果赋值给图片元素的src属性 img.src = reader.result; } // 读取文件内容 if (file) { reader.readAsDataURL(file); } }); } </script> </head> <body> <form id="upload-form" enctype="multipart/form-data"> <!-- 修改type属性为camera,拉起相机 --> <input type="file" id="upload" name="upload" accept="image/*" capture="camera"/> <!-- 添加一个图片元素用于展示图片 --> <img style="height:300px;width:300px" id="preview" /> </form> </body> </html>