HarmonyOS 鸿蒙Next webview 加载input 标签选择照片/视频

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next webview 加载input 标签选择照片/视频

查看文档，点击input标签时会回掉onShowFileSelector，但是没有打开图片/视频选择器

类似在iOS的webview上，点击input标签 会显示一个图片/视频选择器。如何在鸿蒙系统上实现相似的功能呢？

Harmonyos Next教程
2 回复
该功能实现可参考下方链接的示例代码

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001930757269__onshowfileselector9

// xxx.ets

import { webview } from ‘@kit.ArkWeb’;


import { picker } from ‘@kit.CoreFileKit’;


import { photoAccessHelper } from ‘@kit.MediaLibraryKit’;


@Entry


@Component


export struct WebComponent {


  controller: webview.WebviewController = new webview.WebviewController()


  async selectFile(result: FileSelectorResult): Promise<void> {


    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();


    let photoPicker = new photoAccessHelper.PhotoViewPicker();


    // 过滤选择媒体文件类型为IMAGE


    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;


    // 设置最大选择数量


    photoSelectOptions.maxSelectNumber = 5;


    let chooseFile: picker.PhotoSelectResult = await photoPicker.select(photoSelectOptions);


    // 获取选择的文件列表


    result.handleFileList(chooseFile.photoUris);


  }


  build() {


    Column() {


      Web({ src: $rawfile(‘index.html’), controller: this.controller })


        .onShowFileSelector((event) => {


          if (event) {


            this.selectFile(event.result);


          }


          return true;


        })


    }


  }


}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
<!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><button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

在HarmonyOS鸿蒙Next平台上，如果你在使用webview加载包含<input type="file">标签的HTML页面，并希望用户能够选择照片或视频，以下是一些关键点和可能遇到的问题及解决方法：

  1. 权限配置：确保你的应用已正确配置了访问存储的权限。在config.json中声明必要的权限，如ohos.permission.READ_MEDIA和ohos.permission.WRITE_MEDIA。

  2. Webview设置：检查webview的配置，确保它支持文件选择功能。某些webview可能需要额外的设置来启用文件输入。

  3. 文件选择器集成：HarmonyOS的webview可能默认不提供文件选择器UI。如果内置的<input type="file">不起作用，你可能需要自定义一个文件选择器界面，使用鸿蒙的Storage Access Framework（SAF）或媒体库API让用户选择文件。

  4. JavaScript接口：如果你的webview支持JavaScript接口，可以通过JavaScript调用鸿蒙的原生API来实现文件选择功能。

  5. 兼容性测试：由于鸿蒙系统的特殊性，务必在真实设备或模拟器上进行充分的测试，以确保功能在不同版本和设备上的一致性。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部