问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用onShowFileSelector()函数拉起图库上传图片?

头像
HarmonyOS助手
    15749106

    如何使用onShowFileSelector()函数拉起图库上传图片

    HarmonyOSharmonyosharmonyos-next
    阅读 356
    1 个回答
    得票最新
    头像
    HarmonyOS助手
      15749106

      调用onShowFileSelector函数处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。返回值为true时用户可以通过系统弹窗能力选择图库并上传选中的图片。

      需要注意的是：如果用户拉起图库后不选择图片，然后将应用切换到前台，会出现再次选择上传图片无法拉起图库现象。

      原因是在第一次拉起图库时启动一个线程，线程走到选择图片时不选择图片，将图库切到后台该线程则会阻塞到选择图片的步骤，导致再次点击上传图片拉起图库失败。

      建议在开发时添加如下逻辑：如果不选择图片就返回一个空值，该线程可以走完它的生命周期，当把图库切换到后台，再次上传图片时就会启动一个新的线程，成功拉起图库。参考代码如下：

      // xxx.ets 
import { webview } from '@kit.ArkWeb'; 
import { picker } from '@kit.CoreFileKit'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .onShowFileSelector((event) => { 
          console.log('MyFileUploader onShowFileSelector invoked'); 
          const documentSelectOptions = new picker.PhotoSelectOptions(); 
          let uri: string | null = null; 
          const documentViewPicker = new picker.PhotoViewPicker(); 
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => { 
            uri = documentSelectResult[0]; 
            console.info('documentViewPicker.select to file succeed and uri is:' + uri); 
            if (event) { 
              event.result.handleFileList([uri]); 
            } 
          }).catch((err: BusinessError) => { 
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 
          }) 
          return true; 
        }) 
    } 
  } 
}

      在“src/main/resources/rawfile”路径下创建index.html文件：

      <!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 
</head> 
<body> 
<form id="upload-form" enctype="multipart/form-data"> 
    <input type="file" id="upload" name="upload"/> 
</form> 
</body> 
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题