Flutter使用FilePicker上传Firebase Cloud Storage时程序无响应

你的代码在选择文件后出现冻结，大概率是以下几个原因导致的，对应解决方法如下：

1. 未捕获异常导致程序无响应 #

代码里没有错误捕获逻辑，一旦文件读取、上传过程中出现异常（比如权限不足、文件损坏、网络问题），会导致程序卡住而没有任何反馈。

修复方法：添加try-catch块捕获异常

Future<String?> uploadImageOld () async {
  try {
    FilePickerResult? result = await FilePicker.platform.pickFiles();
    if (result != null) {
      final storageRef = FirebaseStorage.instance.ref();
      final imagesDir = storageRef.child('images');
      File file = File(result.files.single.path!);
      final filename = Path.basename(file.path);
      final uploadRef = imagesDir.child(filename); // 修正路径：避免重复的images目录
      await uploadRef.putFile(file);
      return await uploadRef.getDownloadURL();
    } else {
      return null;
    }
  } catch (e) {
    print('上传出错：$e'); // 打印错误信息排查问题
    return null;
  }
}

2. 跨平台文件路径兼容性问题 #

在Web平台或者某些iOS版本中，result.files.single.path可能为空，直接用File(path!)会抛出异常，导致程序冻结。

修复方法：兼容文件字节数据上传

Future<String?> uploadImage () async {
  try {
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      withData: true, // 允许获取文件字节数据，兼容Web
    );
    if (result != null) {
      final storageRef = FirebaseStorage.instance.ref();
      final imagesDir = storageRef.child('images');
      final filename = result.files.single.name; // 直接用文件名，避免路径问题
      final uploadRef = imagesDir.child(filename);

      // 根据平台选择上传方式
      if (result.files.single.path != null) {
        File file = File(result.files.single.path!);
        await uploadRef.putFile(file);
      } else {
        // Web端用字节数据上传
        await uploadRef.putData(result.files.single.bytes!);
      }

      return await uploadRef.getDownloadURL();
    } else {
      return null;
    }
  } catch (e) {
    print('上传出错：$e');
    return null;
  }
}

3. 主线程被阻塞 #

如果上传的是大文件，putFile的同步文件读取操作可能会短暂阻塞主线程，导致UI冻结。可以将文件读取和上传逻辑改为异步流处理。

优化方法：用文件流异步上传

Future<String?> uploadImage () async {
  try {
    FilePickerResult? result = await FilePicker.platform.pickFiles();
    if (result != null) {
      final storageRef = FirebaseStorage.instance.ref();
      final imagesDir = storageRef.child('images');
      final filename = Path.basename(result.files.single.path!);
      final uploadRef = imagesDir.child(filename);

      // 用文件流异步上传，避免阻塞主线程
      final file = File(result.files.single.path!);
      final stream = file.openRead();
      final length = await file.length();
      await uploadRef.putStream(stream, SettableMetadata(contentLength: length));

      return await uploadRef.getDownloadURL();
    } else {
      return null;
    }
  } catch (e) {
    print('上传出错：$e');
    return null;
  }
}

4. 权限未正确配置 #

Android端需要申请存储读取权限，iOS端需要配置相册访问权限，否则文件读取失败会导致程序卡住。

• Android：在AndroidManifest.xml中添加

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

• iOS：在Info.plist中添加

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册选择图片</string>
  

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