Flutter中如何批量上传图片至Firebase Storage并将URL存入Firestore

前置依赖确认 #

确保你的pubspec.yaml中已添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  multi_image_picker: ^4.8.1 # 使用最新版本
  firebase_storage: ^11.2.0
  cloud_firestore: ^4.4.0
  firebase_auth: ^4.2.0
  path_provider: ^2.0.11

步骤1：将Multi Image Picker的Asset转换为File #

Multi Image Picker返回的是Asset对象，而Firebase Storage的putFile方法需要File类型，因此需要先做转换：

import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:multi_image_picker/multi_image_picker.dart';

Future<File> assetToFile(Asset asset) async {
  final byteData = await asset.getByteData();
  final tempDir = await getTemporaryDirectory();
  final tempFile = File('${tempDir.path}/${asset.name}');
  return await tempFile.writeAsBytes(
    byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes)
  );
}

步骤2：批量上传图片并获取下载URL #

修正你原有的上传代码，解决异步任务不等待的问题，同时按指定路径存储：

onPressed: () async {
  final storage = FirebaseStorage.instance;
  final auth = FirebaseAuth.instance;
  final firestore = FirebaseFirestore.instance;
  
  // 校验用户登录状态
  if (auth.currentUser == null) return;
  final userEmail = auth.currentUser!.email!;
  
  List<String> imageUrls = [];

  // 遍历图片列表，用索引构建存储路径
  for (int index = 0; index < widget.images.length; index++) {
    try {
      Asset asset = widget.images[index];
      File imageFile = await assetToFile(asset);
      
      // 按需求构建存储路径
      String storagePath = 'images/posts/$userEmail/images/$index';
      // 上传文件
      TaskSnapshot snapshot = await storage.ref(storagePath).putFile(imageFile);
      // 获取下载URL
      String downloadUrl = await snapshot.ref.getDownloadURL();
      imageUrls.add(downloadUrl);
    } catch (e) {
      print('图片上传失败: $e');
    }
  }

  // 步骤3：将下载URL存入Firestore
  if (imageUrls.isNotEmpty) {
    try {
      // 示例：在posts集合创建新文档，存储用户信息和图片URL列表
      await firestore.collection('posts').add({
        'userEmail': userEmail,
        'imageUrls': imageUrls,
        'createTime': FieldValue.serverTimestamp(), // 可选：添加时间戳
      });
      print('图片URL已成功写入Firestore');
    } catch (e) {
      print('写入Firestore失败: $e');
    }
  }
}

关键优化点 #

• 并行上传优化：如果想提升上传速度，可改用Future.wait实现并行上传：

  List<Future<String>> uploadTasks = widget.images.asMap().entries.map((entry) async {
    int index = entry.key;
    Asset asset = entry.value;
    File imageFile = await assetToFile(asset);
    String storagePath = 'images/posts/$userEmail/images/$index';
    TaskSnapshot snapshot = await storage.ref(storagePath).putFile(imageFile);
    return await snapshot.ref.getDownloadURL();
  }).toList();
  imageUrls = await Future.wait(uploadTasks);
  

• 权限配置：确保已在AndroidManifest.xml和Info.plist中配置文件读取权限，否则无法获取图片文件。
• 异常处理：通过try-catch捕获上传和存储过程中的异常，避免应用崩溃。

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