uni-app webview访问h5 input file选择相册图片未授权不会触发onchange回调

uni-app webview访问h5 input file选择相册图片未授权不会触发onchange回调

示例代码：

plus.webview.loadURL(url)
h5链接使用vant


### 操作步骤：


1. 项目用webview访问h5
2. h5的input  file  选择相册图片

预期结果：

onchange正常获得图片blob信息


### 实际结果：


无反应

bug描述：

项目用webview访问h5 ，然后h5的input file 选择相册图片，未授权获取手机存储权限时 ，不会弹出获取本地存储授权提示，选择文件时就会弹出，此bug会造成选择相册图片无法触发 input onchange回调

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
3.1.22

2c5f706a420f919197e768fc40015ea5.rar


更多关于uni-app webview访问h5 input file选择相册图片未授权不会触发onchange回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

此bug 暂时解决，初始化时候获取手机读写权限，但是现在审核严格，后面还是要做成上传图片时候可以正常获取权限

更多关于uni-app webview访问h5 input file选择相册图片未授权不会触发onchange回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我们大佬解决了，我们打的是离线包，原生监听相册打开行为，加了授权操作 import io.dcloud.PandoraEntryActivity;

public class YYPandoraEntryActivity extends PandoraEntryActivity {

@Override  
public void startActivityForResult(Intent intent, int requestCode) {  
    if (intent.getAction().equals("android.intent.action.GET_CONTENT")){  
        PermissionUtil.requestPermissions(YYPlatApplication.getCurrActivity(), new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE,  Manifest.permission.READ_EXTERNAL_STORAGE}, new PermissionUtil.OnPermissionListener() {  
            @Override  
            public void onPermissionGranted() {  

                runOnUiThread(new Runnable() {  
                    @Override  
                    public void run() {  
                        YYPandoraEntryActivity.super.startActivityForResult(intent, requestCode);  
                    }  
                });  
            }  

            @Override  
            public void onPermissionDenied() {  
                AbCenter.ME().postEvent("message", "permissionMessage,WRITE_EXTERNAL_STORAGE,READ_EXTERNAL_STORAGE");  
            }  
        });  
    }else{  
        super.startActivityForResult(intent, requestCode);  
    }  
}

}

这是一个典型的权限处理问题。在uni-app的Webview中，当H5页面尝试访问相册时，需要先获取系统存储权限。

问题分析：

  1. 权限机制差异：Webview中的H5页面无法直接触发原生权限弹窗
  2. 权限检查时机：选择文件时系统才会检查权限，但此时权限不足会导致操作静默失败
  3. 回调触发条件：onchange回调只有在文件选择成功完成后才会触发

解决方案：

方案一：App端预授权（推荐） 在加载Webview前，先获取必要的权限：

// 在uni-app页面中
onLoad() {
    // 检查并申请存储权限
    plus.android.requestPermissions(['android.permission.READ_EXTERNAL_STORAGE'], (e) => {
        if (e.deniedAlways.length > 0) {
            // 权限被永久拒绝
            uni.showModal({
                title: '提示',
                content: '需要存储权限才能选择图片',
                showCancel: false
            })
        } else {
            // 权限已获取，加载Webview
            this.loadWebview()
        }
    }, (e) => {
        console.log('权限申请失败')
    })
}

方案二：H5端使用uni-app的API 如果H5页面是可控的，建议使用uni-app的原生API：

// H5页面中通过uni.postMessage与App通信
uni.postMessage({
    data: {
        action: 'chooseImage'
    }
})

// App端监听并调用原生选择图片
plus.webview.currentWebview().addEventListener('message', (e) => {
    if (e.data.action === 'chooseImage') {
        uni.chooseImage({
            success: (res) => {
                // 将图片信息传回H5
                plus.webview.currentWebview().evalJS(`window.receiveImage(${JSON.stringify(res.tempFilePaths)})`)
            }
        })
    }
})

方案三：使用plus.gallery替代 对于需要访问相册的场景，建议直接使用plus.gallery.pick：

plus.gallery.pick((file) => {
    // 处理选择的文件
}, (error) => {
    console.log('选择失败：' + error.message)
}, {
    filter: 'image'
})
回到顶部