Flutter Webview无法唤起图片选择界面的解决方法咨询

1. 动态申请存储权限 #

虽然你在AndroidManifest.xml中声明了存储权限，但Android 6.0及以上版本需要动态申请权限才能让应用访问本地文件。可以使用permission_handler插件实现：

步骤： #

• 在pubspec.yaml添加依赖：

dependencies:
  permission_handler: ^10.0.0

• 初始化WebView前调用权限申请代码：

import 'package:permission_handler/permission_handler.dart';

Future<void> requestStoragePermission() async {
  PermissionStatus status;
  // Android 13+ 使用READ_MEDIA_IMAGES权限
  if (await Permission.storage.isRestricted) {
    status = await Permission.photos.request();
  } else {
    status = await Permission.storage.request();
  }
  
  if (!status.isGranted) {
    // 处理权限拒绝逻辑，比如提示用户开启权限
  }
}

2. 配置WebView的文件上传支持 #

使用webview_flutter插件时，需要主动处理文件选择回调，否则网站的图片选择触发后不会唤起系统文件选择器。

步骤： #

• 添加file_picker插件依赖（用于唤起系统文件选择器）：

dependencies:
  webview_flutter: ^4.0.0
  file_picker: ^5.0.0

• 配置WebView的文件选择回调：

WebView(
  initialUrl: "你的目标网站地址",
  javascriptMode: JavascriptMode.unrestricted, // 必须开启JS支持
  // Android端处理文件选择
  androidOnShowFileChooser: (controller, filePathCallback, params) async {
    // 唤起系统图片选择器
    final result = await FilePicker.platform.pickFiles(
      type: FileType.image,
      allowMultiple: params.mode == FileChooserMode.openMultiple,
    );

    if (result != null) {
      // 将选择的文件路径返回给WebView
      filePathCallback(result.paths.map((path) => Uri.file(path!)).toList());
    } else {
      filePathCallback([]);
    }
    return true;
  },
  // iOS端可选配置
  iosOnImagePickerPermissionDenied: () {
    // 处理iOS权限拒绝提示
  },
)

3. 完善AndroidManifest配置 #

• 针对Android 13+，新增媒体权限声明：

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

• 确保Activity配置了必要的configChanges，避免WebView重启：

<activity
  android:name="你的主Activity路径"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  ...>
</activity>

4. 检查网站JS兼容性 #

确认目标网站的图片选择功能使用标准的input[type="file"] API，WebView已开启JavaScript支持（javascriptMode: JavascriptMode.unrestricted），没有禁用相关JS接口。

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