HarmonyOS web组件H5页面如何选择手机图片视频

HarmonyOS

Heiang

2024-09-05 09:18:32

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

参考示例如下：

<!DOCTYPE html> 
  <html> 
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 
  </head> 
  <script> 
  function onFileSelect(input) { 
    var file = input.files[0]; 
    console.log("onFileSelect"); 
    if(window.FileReader){ 
      var fr = new FileReader(); 
      fr.readAsDataURL(file); 
      fr.onloadend = function() { 
        document.getElementById("img").src = fr.result; 
      } 
    } 
  } 
  </script> 
  <body> 
  <img style="width: 200px" id="img" src=""> 
  <form id="upload-form" enctype="multipart/form-data"> 
  <input type="file" id="upload" name="upload" onchange="onFileSelect(this)"/> 
  </form> 
  </body> 
  </html>
// xxx.ets   
import web_webview from '@ohos.web.webview'; 
import picker from '@ohos.file.picker'; 
import { BusinessError } from '@ohos.base'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .onShowFileSelector((event) => { 
          let uri = ''; 
          let photoViewPicker = new picker.PhotoViewPicker(); 
          let photoSelectOption = new picker.PhotoSelectOptions(); 
          photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; 
          photoViewPicker.select(photoSelectOption).then((photoSelectResult) => { 
            uri = photoSelectResult.photoUris[0]; 
            console.log("uri:" + uri) 
            if(event) { 
              event.result.handleFileList([uri]) 
            } 
          }).catch((err:BusinessError) => { 
            console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 
          }) 
          return true 
        }).onConsole(event =>{ 
        console.info("onConsole " + event?.message.getMessage()) 
        return true 
      }) 
    }  } 
}