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

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

HarmonyOS
2024-03-17 17:34:55
浏览
收藏 0
回答 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>
分享
微博
QQ
微信
回复
2024-03-18 21:12:12
相关问题
分布式如何读写图库图片或者视频?
2850浏览 • 1回复 待解决
怎么实现后台上传图片
562浏览 • 1回复 待解决
从本机获取图片进行上传到spring后端
725浏览 • 1回复 待解决
django orm 如何使用 mysql now函数?
1532浏览 • 1回复 待解决
使用FilePick上传uri失败,报错201
144浏览 • 1回复 待解决
如何使用AbilityStage的生命周期函数
313浏览 • 1回复 待解决
51CTO不能把上传图片搞清晰一点吗?
1712浏览 • 2回复 待解决
如何修改spark资源上传目录?
419浏览 • 1回复 待解决
使用OrmPredicates无法做函数查询吗?
3767浏览 • 1回复 待解决
鸿蒙图片资源在Java代码中如何使用
6278浏览 • 1回复 待解决
图库支持打开哪些格式啊?
616浏览 • 1回复 待解决
Js如何定义callback函数
212浏览 • 1回复 待解决
如何拉起拨号界面并指定号码
170浏览 • 1回复 待解决
如何拉起设置蓝牙页面
324浏览 • 2回复 待解决
如何拉起应用市场界面
225浏览 • 1回复 待解决
打开图库应用时偶尔会闪退
761浏览 • 0回复 待解决
如何拉起短信界面并指定联系人
180浏览 • 1回复 待解决
如何拉起相机界面,有人知道吗?
141浏览 • 1回复 待解决