如何在Flutter中使用InAppWebView实现文件下载与上传

文件下载实现 #

1. 添加依赖
   在pubspec.yaml中添加所需依赖：

   dependencies:
     flutter_inappwebview: ^6.0.0 # 请使用最新稳定版
     flutter_downloader: ^1.10.0
     path_provider: ^2.0.15
   

2. 配置权限

   • Android：在android/app/src/main/AndroidManifest.xml中添加权限

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

     同时在<application>标签内添加FlutterDownloader的服务配置：

     <service android:name="vn.hunghd.flutterdownloader.DownloadService"
              android:permission="android.permission.BIND_JOB_SERVICE"
              android:exported="false">
         <intent-filter>
             <action android:name="android.app.job.JobService"/>
         </intent-filter>
     </service>
     

   • iOS：在ios/Runner/Info.plist中添加权限描述

     <key>NSPhotoLibraryAddUsageDescription</key>
     <string>需要访问相册以保存下载文件</string>
     

3. 实现下载逻辑
   在InAppWebView组件中监听onDownloadStartRequest回调，触发下载操作：

   InAppWebView(
     initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
     onDownloadStartRequest: (controller, request) async {
       // 获取下载链接和建议文件名
       final downloadUrl = request.url.toString();
       final fileName = request.suggestedFilename ?? "unknown_file";
       
       // 获取存储目录
       final directory = await getExternalStorageDirectory();
       if (directory == null) return;
       
       // 使用FlutterDownloader发起下载
       await FlutterDownloader.enqueue(
         url: downloadUrl,
         savedDir: directory.path,
         fileName: fileName,
         showNotification: true, // 显示下载通知
         openFileFromNotification: true, // 点击通知打开文件
       );
     },
   )
   

文件上传实现 #

1. 添加依赖
   在pubspec.yaml中添加文件选择依赖：

   dependencies:
     file_picker: ^5.3.2
   

2. 配置权限

   • Android：在android/app/src/main/AndroidManifest.xml中添加权限

     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
     

   • iOS：在ios/Runner/Info.plist中添加权限描述

     <key>NSPhotoLibraryUsageDescription</key>
     <string>需要访问相册选择上传文件</string>
     <key>NSCameraUsageDescription</key>
     <string>需要使用相机拍摄上传文件</string>
     

3. 实现上传逻辑
   在InAppWebView组件中监听onFileChooserRequest回调，处理文件选择：

   InAppWebView(
     initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
     onFileChooserRequest: (controller, request) async {
       // 根据网页的选择模式，配置文件选择器
       final fileResult = await FilePicker.platform.pickFiles(
         type: FileType.any,
         allowMultiple: request.mode == FileChooserMode.openMultiple,
       );
       
       if (fileResult == null) return null;
       
       // 将选中文件转换为WebFile格式返回给WebView
       final webFiles = fileResult.files.map((file) {
         return WebFile(
           uri: Uri.file(file.path!),
           name: file.name,
           length: file.size,
           mimeType: file.extension != null ? lookupMimeType(file.path!) : null,
         );
       }).toList();
       
       return FileChooserResponse(files: webFiles);
     },
   )
   

注意事项 #

• 确保所有依赖包使用最新稳定版本，避免兼容性问题
• Android 13+的权限配置需要适配新的存储权限模型，可参考官方文档调整
• iOS端需在Xcode中确认权限描述已正确配置

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