Flutter Web中file_picker在Safari无法弹出文件选择器求助

针对你遇到的问题，主要是Safari的安全限制和代码细节问题导致的，以下是具体排查和修复方案：

核心原因与修复步骤 #

1. 遵守Safari的用户交互触发规则 #

Safari严格限制文件选择器必须在用户主动触发的事件回调内执行（比如按钮的onTap/onPressed）。如果你的uploadFile方法是通过异步延迟、状态变更回调或其他非用户直接操作的方式调用，Safari会直接阻止文件选择器弹出。

修复方式：确保FilePicker.platform.pickFiles()直接绑定在用户点击等主动交互事件中，示例：

ElevatedButton(
  onPressed: () => uploadFile('你的上传地址'),
  child: const Text('选择并上传图片'),
)

2. 显式指定文件类型 #

你的代码中注释了//type: FileType.image但未实际传入参数，这可能导致Safari对文件选择器的类型解析异常。

修复方式：在pickFiles中明确指定文件类型：

FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.image);

3. 更新file_picker到最新稳定版本 #

旧版本的file_picker存在Safari兼容性问题，确保依赖为最新稳定版，修改pubspec.yaml：

file_picker: ^最新稳定版本号

执行flutter pub get更新依赖。

4. 确保运行环境为HTTPS #

Safari在非HTTPS生产环境下会限制部分浏览器API，生产部署时必须使用HTTPS协议；本地开发使用localhost通常不受影响。

修改后的完整代码示例 #

Future<void> uploadFile(String uploadUrl, {int maxBytes = 2097152}) async {
  // 显式指定图片类型
  FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.image);
  if (result == null) {
    LogManager().log('No file selected.');
    return;
  }

  final bytes = result.files.first.bytes;
  if (bytes == null) return;

  LogManager().log('File size: ${bytes.length}');
  if (bytes.length > maxBytes) {
    throw Exception('File size is too large.');
  }

  final uri = Uri.parse(uploadUrl);

  try {
    Map<String, String> headers = {
      'Content-Length': '${bytes.length}',
    };
    await http.put(uri, headers: headers, body: bytes);
  } on http.ClientException catch (e) {
    LogManager().log('uploadFile ClientException: $e');
  } catch (e) {
    LogManager().log('uploadFile Unhandled exception: $e');
  }

  LogManager().log('WEB - Image uploaded successfully.');
}

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