Flutter WebView 4.0.7图片上传异常：Android端点击无响应

问题原因 #

Android端WebView默认不会处理文件上传的Intent请求，需手动配置文件选择回调逻辑；而iOS端WebView已默认支持该行为，因此出现两端表现不一致的情况。

修复步骤 #

1. 配置WebChromeClient处理文件选择请求 #

通过WebChromeClient的onShowFileChooser方法拦截WebView的文件上传请求，结合ImagePicker实现图片选择逻辑。

2. 修改现有代码 #

更新WebViewController的初始化逻辑，添加文件上传处理：

Widget build(BuildContext context) {
  final ImagePicker _picker = ImagePicker();

  return WillPopScope(
    onWillPop: () => _goBack(context),
    child: Scaffold(
      body: netState
          ? Padding(
              padding: EdgeInsets.only(top: 50),
              child: WebViewWidget(
                  controller: _controller
                    ..setJavaScriptMode(JavaScriptMode.unrestricted)
                    ..setNavigationDelegate(
                      NavigationDelegate(
                        onPageFinished: (String url) {
                          _controller.runJavaScript(
                              "document.getElementsByClassName('logo me-lg-4')[0].remove();" +
                                  "document.getElementsByClassName('cookies-card bg--default text-center cookies--dark radius--10px')[0].remove();");
                        },
                      ),
                    )
                    // 新增Android文件上传处理
                    ..setWebChromeClient(WebChromeClient(
                      @override
                      bool onShowFileChooser(
                        WebViewController controller,
                        FileChooserParams params,
                      ) async {
                        // 调用ImagePicker选择相册图片
                        final XFile? image = await _picker.pickImage(
                          source: ImageSource.gallery,
                          imageQuality: 80,
                        );
                        if (image != null) {
                          // 将选中图片路径返回给WebView
                          params.onSelectedFiles([Uri.parse(image.path)]);
                          return true;
                        }
                        // 取消选择时返回空列表
                        params.onSelectedFiles([]);
                        return false;
                      },
                    ))
                    ..loadRequest(
                        Uri.parse('https://www.ilovepdf.com/unlock_pdf'))),
            )
          // 补充原无网络状态UI，可根据实际需求替换
          : const Center(child: Text("无网络连接")),
    ),
  );
}

3. 配置Android权限 #

在android/app/src/main/AndroidManifest.xml中添加相册访问权限：

<!-- Android 12及以下 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- Android 13及以上适配新权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

4. 动态请求权限 #

在页面初始化时主动申请相册权限，避免权限不足导致无法选择图片：

@override
void initState() {
  super.initState();
  _requestGalleryPermission();
}

Future<void> _requestGalleryPermission() async {
  if (Platform.isAndroid) {
    final status = await Permission.photos.request();
    if (status.isDenied) {
      // 此处可添加权限被拒绝后的提示逻辑
    }
  }
}

需在pubspec.yaml中添加权限处理依赖：

dependencies:
  permission_handler: ^10.2.0

关键说明 #

• onShowFileChooser是Android端处理WebView文件上传的核心回调，必须实现才能唤起图片选择器；
• 若需支持相机拍照上传，可在ImagePicker中切换source: ImageSource.camera；
• Android 13及以上版本的媒体权限机制有变更，需同时配置新权限以兼容不同系统版本。

内容的提问来源于stack exchange，提问作者Ram Gupta