Flutter Firebase多图片上传：实现上传数量计数UI指示器

核心思路 #

通过维护已上传图片计数，结合总图片数量，实时更新UI显示进度文本（如“已上传1/10张图片”）。关键是每完成一张图片上传后，立即更新计数并触发UI刷新。

具体实现步骤 #

1. 添加状态变量跟踪进度
   在Widget的State类中定义变量，用于记录上传进度：

// 已上传完成的图片数量
int _uploadedCount = 0;
// 总待上传图片数量
int get _totalCount => imageFileList?.length ?? 0;

2. 修改上传方法，实时更新计数
   更新uploadImage方法，每完成一张上传后更新计数并刷新UI：

Future uploadImage() async {
  // 上传前重置计数，确保进度从0开始
  _uploadedCount = 0;
  setState(() {});

  for (var image in imageFileList!) {
    // 生成唯一文件名（简化原代码中冗余的文件名替换逻辑）
    String uniqueFileName = DateTime.now().microsecondsSinceEpoch.toString();
    Reference reference = FirebaseStorage.instance.ref().child("images").child(uniqueFileName);

    // 执行上传
    await reference.putFile(File(image.path));

    // 获取下载链接并存储
    String downloadUrl = await reference.getDownloadURL();
    getDownloadUrls.add(downloadUrl);

    // 上传完成后更新计数，触发UI刷新
    _uploadedCount++;
    setState(() {});
  }
}

3. UI中添加进度显示组件
   在需要展示进度的位置添加文本组件，直接渲染计数信息：

Text("已上传 $_uploadedCount/$_totalCount 张图片"),

进阶优化（可选） #

如果需要显示单张图片的上传百分比（如“正在上传第3张：50%”），可以利用putFile的snapshotEvents回调监听实时上传进度：

// 替换循环内的putFile代码
await reference.putFile(
  File(image.path),
  SettableMetadata(contentType: "image/jpeg"),
).snapshotEvents.listen((TaskSnapshot snapshot) {
  // 计算当前图片的上传进度百分比
  double singleProgress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  // 更新UI显示单张进度
  setState(() {
    _currentUploadInfo = "正在上传第${_uploadedCount+1}张：${singleProgress.toStringAsFixed(0)}%";
  });
}).asFuture();

内容的提问来源于stack exchange，提问作者jpg.hue