Flutter Web如何实现目录选择？需上传文件夹至Google Cloud Storage

方案一：利用Web原生API实现文件夹选择（最可靠） #

Flutter Web基于浏览器环境运行，直接调用原生input控件的文件夹选择能力，无需依赖第三方包的跨端适配：

• 创建隐藏的file类型input元素，开启webkitdirectory属性（支持现代主流浏览器）
• 监听文件选择事件，通过webkitRelativePath获取文件在原文件夹中的相对路径，以此保留目录结构
• 将选中的文件直接通过GCS的客户端SDK或Signed URL上传

代码示例

import 'dart:html' as html;

// 触发文件夹选择弹窗
void selectFolder() {
  final folderPicker = html.FileInputElement()
    ..type = 'file'
    ..webkitdirectory = true // 开启文件夹选择模式
    ..multiple = true; // 自动选中文件夹内所有子文件

  folderPicker.onChange.listen((_) {
    final selectedFiles = folderPicker.files;
    if (selectedFiles != null) {
      for (final file in selectedFiles) {
        // 获取文件在原文件夹中的相对路径，用于GCS对象路径
        final relativePath = file.webkitRelativePath;
        // 执行上传逻辑
        uploadFileToGCS(file, relativePath);
      }
    }
  });

  // 触发选择弹窗
  folderPicker.click();
}

// 上传至GCS的示例逻辑（需根据实际配置调整）
Future<void> uploadFileToGCS(html.File file, String gcsObjectPath) async {
  // 方式1：使用Firebase Storage客户端SDK（推荐，无需手动处理签名）
  // final storageRef = FirebaseStorage.instance.ref().child(gcsObjectPath);
  // await storageRef.putBlob(file);

  // 方式2：使用GCS Signed URL上传（适合自建后端生成签名）
  // final signedUrl = await yourBackendApi.getSignedUrl(gcsObjectPath, file.type);
  // await html.HttpRequest.putBlob(signedUrl, file);
}

方案二：适配Web端的第三方包 #

如果想尽量保持跨端代码风格，可尝试支持Web文件夹选择的第三方包：

• 部分更新后的file_picker版本在Web端支持pickFiles(withDirectory: true)参数，可返回包含相对路径的文件列表
• 若file_picker仍不满足需求，可尝试flutter_web_file_picker这类专门针对Web的包，但需注意包的维护状态

关键注意事项 #

• 浏览器兼容性：webkitdirectory支持Chrome、Firefox 50+、Edge、Safari 11.1+，覆盖绝大多数用户场景
• 目录结构保留：通过webkitRelativePath可完整还原原文件夹的层级结构，上传时直接将该路径作为GCS的对象键即可
• 跨域配置：若直接调用GCS API，需在GCS控制台配置CORS规则，允许你的Web域名发起上传请求；使用Firebase Storage则无需额外配置跨域

内容的提问来源于stack exchange，提问作者Hannes Hultergård