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

HarmonyOS

dickhome

2024-03-17 17:34:55

浏览

回答 1

待解决

回答 1

按赞同

按时间

失望的满天星

调用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>

2024-03-18 21:12:12

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看