Flutter WebView图片上传按钮失效 浏览器正常问题咨询

Flutter 官方 WebView 插件默认未实现文件选择回调逻辑，即使配置了Android清单权限，点击WebView内的<input type="file">元素（WordPress图片上传按钮本质就是触发该元素）也不会唤起系统文件选择器，这是功能失效的根本原因，和页面本身无关——系统浏览器默认实现了这套文件选择逻辑，所以访问相同页面可以正常上传。

1. Android端清单文件补全适配高版本的权限 #

你现有权限只适配了Android 12及以下版本，Android 13（API 33）及以上版本使用分区存储，旧的存储权限不生效，需要在android/app/src/main/AndroidManifest.xml中补充以下权限：

<!-- Android 13+ 读取设备图片权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<!-- 需要支持直接拍照上传的话补充相机权限 -->
<uses-permission android:name="android.permission.CAMERA" />

API级别低于33的设备原有READ_EXTERNAL_STORAGE、WRITE_EXTERNAL_STORAGE权限保留即可，不需要删除。

2. main.dart中补全WebView的核心逻辑 #

这部分是你目前缺失的核心配置：

• 首先确保WebView开启了无限制JS执行权限，WordPress的上传交互强依赖JS运行
• 实现WebView的文件选择回调，在回调中唤起系统文件选择器，将选中的文件路径回传给WebView
  以官方webview_flutter 4.x以上版本为例，参考实现如下：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:file_picker/file_picker.dart';
import 'package:permission_handler/permission_handler.dart';

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _webController;

  @override
  void initState() {
    super.initState();
    _webController = WebViewController()
      // 必须开启JS执行权限
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 实现文件选择回调，这是解决上传失效的核心
      ..setOnShowFileChooser((controller, params) async {
        // 先申请对应版本的存储权限
        PermissionStatus permissionStatus;
        if (await Permission.photos.isGranted || await Permission.storage.isGranted) {
          permissionStatus = PermissionStatus.granted;
        } else {
          permissionStatus = await Permission.photos.request();
          if (!permissionStatus.isGranted) {
            permissionStatus = await Permission.storage.request();
          }
        }
        if (!permissionStatus.isGranted) {
          return [];
        }
        // 唤起系统图片选择器，匹配WordPress图片上传场景
        FilePickerResult? pickResult = await FilePicker.platform.pickFiles(
          type: FileType.image,
          allowMultiple: params.mode == FileChooserMode.openMultiple,
        );
        // 将选中的文件路径回传给WebView
        if (pickResult != null) {
          return pickResult.files.map((file) => file.path!).toList();
        }
        // 用户取消选择返回空列表
        return [];
      })
      ..loadRequest(Uri.parse("替换为你的WordPress站点地址"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _webController),
    );
  }
}

• 如果使用的是第三方WebView插件（如flutter_inappwebview），逻辑完全一致：找到插件提供的文件选择回调方法，在回调中实现权限申请、唤起文件选择器、回传文件路径的逻辑即可
• iOS端适配需要在ios/Runner/Info.plist中补充相册、相机的权限描述文案，否则调用选择器时会直接崩溃
• 不需要修改WordPress端的任何配置，问题完全出在Flutter WebView的默认实现缺失上

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