Flutter Web开发中如何选择单个或多个文件夹进行上传？

完全不需要依赖第三方上传库，直接调用Flutter Web内置的浏览器API即可实现单/多文件夹选择，具体实现步骤如下：

1. 核心实现逻辑 #

Flutter Web 可直接调用dart:html提供的浏览器原生能力，通过给文件选择input元素新增文件夹专属属性即可开启文件夹选择模式。

2. 代码示例 #

import 'dart:html' as html;

/// 选择文件夹函数
/// [allowMultiple] 是否允许同时选择多个文件夹
void selectFolders({bool allowMultiple = true}) {
  // 创建隐藏的文件选择输入元素
  final html.InputElement input = html.InputElement(type: 'file');
  
  // 配置文件夹选择属性，兼容不同浏览器
  input.setAttribute('webkitdirectory', '');
  input.setAttribute('directory', '');
  input.setAttribute('mozdirectory', '');
  // 配置是否允许选多个文件夹
  input.multiple = allowMultiple;

  // 监听文件夹选择完成事件
  input.onChange.listen((_) {
    final List<html.File> selectedFiles = input.files ?? [];
    if (selectedFiles.isEmpty) return;

    // 遍历所选文件夹内的所有层级文件
    for (final file in selectedFiles) {
      // file.name 为文件名
      // file.relativePath 为文件相对于所选根文件夹的完整路径，可用于后端还原目录结构
      // 此处直接复用你已有的文件上传逻辑即可
      print('文件：${file.name}，路径：${file.relativePath}');
    }
  });

  // 触发系统文件夹选择弹窗
  input.click();
}

3. 注意事项 #

• 该方案兼容所有主流现代浏览器，仅老旧IE浏览器不支持
• 若你的项目需要同时支持移动端/桌面端等非Web平台，可通过Dart条件导入将Web专属逻辑和其他端逻辑分离，避免编译报错
• 上传文件时建议将relativePath一同传给后端，方便后端还原原有的文件夹层级结构，也可避免不同目录下同名文件的覆盖问题

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