使用Flutter_Webview包能否实现文件上传下载？权限配置后无响应

结论先行：官方webview_flutter包完全支持文件上传和下载功能，你遇到的无响应问题大概率是缺少关键配置或代码逻辑，而非包本身的功能限制，无需依赖已停止维护的flutter_webview_plugin。

一、文件上传的正确配置与实现 #

1. 权限处理
   仅在AndroidManifest.xml配置静态权限不够，Android 13+需要额外申请媒体权限，且必须动态请求：

   • 静态权限配置：

     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
     <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
     <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
     <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
     

   • 动态权限请求（可借助permission_handler包）：

     await Permission.photos.request();
     await Permission.videos.request();
     

2. WebView核心配置
   必须开启JavaScript，并实现WebChromeClient的onShowFileChooser回调来对接系统文件选择器（可借助file_picker包）：

   WebViewController _controller = WebViewController()
     ..setJavaScriptMode(JavaScriptMode.unrestricted)
     ..setWebChromeClient(WebChromeClient(
       onShowFileChooser: (controller, params) async {
         final result = await FilePicker.platform.pickFiles(
           type: FileType.any,
           allowMultiple: params.isMultiple,
         );
         if (result != null) {
           return result.paths.map((path) => Uri.file(path!)).toList();
         }
         return [];
       },
     ))
     ..loadRequest(Uri.parse("你的目标网页地址"));
   

二、文件下载的正确配置与实现 #

1. Android端Provider配置
   在AndroidManifest.xml中添加文件共享Provider，用于处理下载文件的Uri跳转：

   <application>
     <provider
       android:name="androidx.core.content.FileProvider"
       android:authorities="${applicationId}.fileprovider"
       android:exported="false"
       android:grantUriPermissions="true">
       <meta-data
         android:name="android.support.FILE_PROVIDER_PATHS"
         android:resource="@xml/file_paths" />
     </provider>
   </application>
   

   然后在res/xml目录下创建file_paths.xml：

   <?xml version="1.0" encoding="utf-8"?>
   <paths xmlns:android="http://schemas.android.com/apk/res/android">
     <external-files-path name="downloads" path="Download/" />
   </paths>
   

2. 下载逻辑实现
   实现WebViewClient的onDownloadStartRequest回调，处理文件下载（可借助dio、path_provider包）：

   ..setWebViewClient(WebViewClient(
     onDownloadStartRequest: (controller, request) async {
       final url = request.url.toString();
       final filename = url.split('/').last;
       final storageDir = await getExternalStorageDirectory();
       final savePath = '${storageDir?.path}/Download/$filename';
   
       // 执行下载
       await Dio().download(url, savePath);
   
       // 通知系统刷新媒体库（Android端）
       if (Platform.isAndroid) {
         final intent = Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
         intent.setData(Uri.fromFile(File(savePath)));
         await FlutterIntentPlugin.sendBroadcast(intent);
       }
     },
   ))
   

三、常见误区澄清 #

你之前了解的"Flutter WebView存在文件上传下载限制"，是针对早期旧版本的webview_flutter（比如1.x版本）。目前官方包已迭代至4.x+版本，完全支持文件上传下载的完整流程，无需依赖停止维护的第三方插件。

四、排查步骤 #

1. 确认webview_flutter版本为最新稳定版（建议4.x以上）；
2. 检查动态权限是否申请成功（可通过permission_handler的status方法验证）；
3. 测试网页端的上传/下载按钮逻辑是否正常（比如input标签type="file"是否正确，下载链接是否可直接访问）。

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