Flutter Firebase多图上传：如何批量上传选中的多张图片？

云原生阿岚

2026-6-23

实现多图批量上传的解决方案

1. 修改IconButton的选择文件逻辑

原来的代码仅处理单个选中文件，现在需要遍历所有选中文件并执行上传操作：

IconButton(
  onPressed: () async {
    final results = await FilePicker.platform.pickFiles(
      allowMultiple: true,
      type: FileType.custom,
      allowedExtensions: ['png', 'jpg'],
    );
    if (results == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("No Image selected")),
      );
      return;
    }

    final docID = widget.docID;
    // 串行上传：按顺序逐个上传文件
    for (final pickedFile in results.files) {
      if (pickedFile.path == null) continue;
      await storage.uploadFile(pickedFile.path!, pickedFile.name, docID);
      print('${pickedFile.name} 上传完成');
    }

    // 并行上传：同时发起所有上传请求，效率更高
    // final uploadTasks = results.files
    //     .where((file) => file.path != null)
    //     .map((file) => storage.uploadFile(file.path!, file.name, docID))
    //     .toList();
    // await Future.wait(uploadTasks);
    // print('所有文件上传完成');
  },
  icon: const Icon(Icons.image_upload), // 补充具体图标
),

2. 上传函数优化（可选）

原上传函数可直接复用，也可增强错误反馈：

Future<void> uploadFile(
  String filePath,
  String fileName,
  String docID,
) async {
  File file = File(filePath);
  try {
    await storage.ref('images/test/$docID/$fileName').putFile(file);
  } on FirebaseException catch (e) {
    print('${fileName} 上传失败：${e.message}');
    // 可在此添加用户可见的错误提示，比如弹出SnackBar
  }
}