全部产品
Search
文档中心

移动开发平台mPaaS:MPH5OpenFileChooserProvider 的使用

更新时间:Jul 25, 2024

使用场景

在 H5 离线包中使用 <input type="file"/> 选择文件或者图片时,若不满足需求,可以使用自定义图片选择功能。如选择图片样式、可选多张图片、动态权限的处理等,推荐使用 MPH5OpenFileChooserProvider 来实现。

实现方式

  1. 在 mPaaS 初始化完成后的回调中注册 MPH5OpenFileChooserProvider

    H5Utils.setProvider(MPH5OpenFileChooserProvider.class.getName(), 
                        new MPH5OpenFileChooserProvider() {
                            @Override
                            public boolean needIntercept(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                //不需要自定义图片选择功能时,不拦截 H5 容器,return false;默认不拦截 H5 容器
                                //需要自定义图片选择功能时,拦截 H5 容器,return true
                                return true;
                            }
    
                            @Override
                            public void openFileChooser(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                // 拿到合法的 uri 给到前端
                                //必须调用该方法,若不调用,下次单击回调不执行
                                //1.通过intent打开一个Activity,调用系统相册或者拍照
                                //2.拿到选择后的图片
                                //3.关闭页面通过valueCallback,传递给前端
                                valueCallback.onReceiveValue(xx);
                            }
                        });
    重要

    valueCallback.onReceiveValue(xx) 函数必须调用,若不调用,下次单击回调不执行。

  2. 在回调函数 openFileChooser 中选择图片进行处理。

    1. 通过 intent 打开一个 Activity,调用系统相册或者拍照。

    2. 获取选择后的图片。

    3. 关闭打开的 Activity,通过 valueCallback 传递图片给前端。

参考方案

方案一

  1. openFileChooser 的回调方法中注册广播接收者。

  2. openFileChooser 方法中通过 Intent 跳转到自己创建的 Activity

  3. 调用系统的拍照/图片选择 SDK(可以进行扩展如图片裁剪等功能)。

  4. 通过图片选择 Activity 获取到最终的选择图片, 发送广播到 openFileChooser 回调的广播监听者,关闭 Activity 页面。

  5. 通过 WebView 系统的 valueCallback.onReceiveValue(xx) 传递给前端。

方案二

  1. openFileChooser 方法中通过 Intent 跳转到一个 Activity,并将 valueCallback 传递给 Activity

  2. 调用系统的拍照/图片选择 SDK(可以进行扩展如图片裁剪等功能)。

  3. 通过 WebView 系统的 valueCallback.onReceiveValue(xx) 传递给前端 。

  4. 关闭 Activity 页面 。