Firebase Storage上传图片到Firestore时无法获取第二个下载URL

安全阿岳

2026-8-28

问题描述

实现图片上传至Firebase Storage、获取下载URL后存入Firebase Firestore时，功能运行异常：仅第一个图片可成功获取下载URL，第二个图片无法获取下载URL，原实现代码如下：

Future<void> uploadImage2(image2) async {
    setState(() {
      isLoader2 = true;
    });
    final bytess = image2.readAsBytesSync();
    var timeStamp = DateTime.now();
    final metadata = firebase_storage.SettableMetadata(contentType: 'CarImage');
    firebase_storage.UploadTask task = firebase_storage.FirebaseStorage.instance
        .ref('Toyota-Images/$timeStamp/2.png')
        .putData(bytess, metadata);
    firebase_storage.TaskSnapshot downloadUrl2 = (await task);

    String url = (await downloadUrl2.ref
        .getDownloadURL()); //this is the url of uploaded image
    imageUrl2 = url;
    setState(() {
      isLoader2 = false;
    });
  }

  Future<void> uploadImage3(image3) async {
    setState(() {
      isLoader3 = true;
    });
    final bytess = image3.readAsBytesSync();
    var timeStamp = DateTime.now();
    final metadata = firebase_storage.SettableMetadata(contentType: 'CarImage');
    firebase_storage.UploadTask task = firebase_storage.FirebaseStorage.instance
        .ref('Toyota-Images/$timeStamp.png')
        .putData(bytess, metadata);
    firebase_storage.TaskSnapshot downloadUrl3 = (await task);

    String url = (await downloadUrl3.ref
        .getDownloadURL()); //this is the url of uploaded image
    imageUrl3 = url;
    setState(() {
      isLoader3 = false;
    });
  }

故障原因

SettableMetadata的contentType配置非法：传入的CarImage不是标准HTTP MIME类型，Firebase Storage会拦截元数据不符合规范的上传请求，第二个上传任务触发时直接被拦截，无法走到获取下载URL的步骤。
存储路径逻辑存在冲突：两个上传方法各自独立生成DateTime.now()作为路径参数，且第二个图片的存储路径和第一个路径层级不一致，如果两个方法触发间隔过短，可能出现路径重名、父目录不存在的写入错误，导致上传失败。
缺少异常捕获逻辑：上传、获取URL的全流程没有错误捕获，一旦第二个任务触发异常，会直接中断流程，既拿不到URL，也不会重置loading状态，表面看就是第二个URL获取失败。

修复方案

直接替换为以下修复后的代码即可：

// 类内提前定义统一的上传批次时间戳，避免多图上传路径冲突
late DateTime uploadBatchTime;

Future<void> uploadImage2(image2) async {
  setState(() {
    isLoader2 = true;
  });
  try {
    final fileBytes = image2.readAsBytesSync();
    // 使用标准图片MIME类型
    final metadata = firebase_storage.SettableMetadata(contentType: 'image/png');
    final ref = firebase_storage.FirebaseStorage.instance
        .ref('Toyota-Images/$uploadBatchTime/2.png');
    final task = await ref.putData(fileBytes, metadata);
    imageUrl2 = await task.ref.getDownloadURL();
  } catch (err) {
    // 调试阶段可打印错误定位具体问题：debugPrint("图2上传失败：$err")
    rethrow;
  } finally {
    // 无论成功失败都重置loading状态
    setState(() {
      isLoader2 = false;
    });
  }
}

Future<void> uploadImage3(image3) async {
  setState(() {
    isLoader3 = true;
  });
  try {
    final fileBytes = image3.readAsBytesSync();
    final metadata = firebase_storage.SettableMetadata(contentType: 'image/png');
    // 和图2保持同批次目录，修正路径层级
    final ref = firebase_storage.FirebaseStorage.instance
        .ref('Toyota-Images/$uploadBatchTime/3.png');
    final task = await ref.putData(fileBytes, metadata);
    imageUrl3 = await task.ref.getDownloadURL();
  } catch (err) {
    // debugPrint("图3上传失败：$err")
    rethrow;
  } finally {
    setState(() {
      isLoader3 = false;
    });
  }
}

// 统一触发上传入口
void handleSubmitUpload(image2, image3) async {
  // 上传开始前生成统一批次时间戳
  uploadBatchTime = DateTime.now();
  // 并行等待两个图片上传完成、拿到所有URL
  await Future.wait([
    uploadImage2(image2),
    uploadImage3(image3)
  ]);
  // 两个URL都获取成功后，再执行Firestore写入逻辑
}

关键修复点说明

替换非法的contentType为标准MIME类型image/png，如果是jpg格式图片可替换为image/jpeg，避免Storage侧的规则校验拦截。
统一多图上传的批次时间戳，将同一次提交的图片存在同一个时间戳命名的目录下，修正第二个图片的路径层级，彻底避免路径冲突。
全流程增加异常捕获，用finally块保证loading状态一定能被重置，调试阶段可以打印catch到的错误快速定位问题。
用Future.wait并行执行两个上传任务，等所有图片的下载URL都获取完成后再写入Firestore，避免单图上传成功就提前写入导致字段缺失。

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