Flutter中如何将图片上传至Firebase Storage并把URL存入Cloud Firestore？

我来帮你搞定图片上传到Firebase Storage并把URL存到Firestore的流程，咱们一步步修改你的现有代码：

1. 先初始化Firebase Storage实例 #

在你的AddOfferScreenState类里，把原来的FirebaseStorage storage;替换成初始化好的实例：

FirebaseStorage storage = FirebaseStorage.instance;

2. 新增图片上传到Storage的函数 #

写一个异步函数，负责把选中的图片文件上传到Storage，并返回生成的下载URL：

Future<String> uploadImageToStorage(File imageFile) async {
  // 生成唯一文件名，防止重复覆盖，这里用时间戳
  String fileName = "${DateTime.now().millisecondsSinceEpoch}.jpg";
  // 指定Storage的存储路径，比如存到offer_images文件夹下
  Reference storageRef = storage.ref().child('offer_images/$fileName');

  // 开始上传文件
  UploadTask uploadTask = storageRef.putFile(imageFile);
  
  // 等待上传完成，获取任务快照
  TaskSnapshot taskSnapshot = await uploadTask;
  
  // 获取最终的下载URL
  String downloadUrl = await taskSnapshot.ref.getDownloadURL();
  return downloadUrl;
}

3. 修改表单提交逻辑，整合图片上传和Firestore存储 #

原来的validateAndSubmit只存储了表单数据，现在要先上传图片拿到URL，再把所有数据一起存到Firestore：

void validateAndSubmit() async{
  if (_handleSubmitted()){
    // 先检查用户是否选中了图片
    if (_imageFile == null) {
      showInSnackBar('请先选择一张商品图片哦');
      return;
    }

    try {
      // 获取选中的图片文件
      File imageFile = await _imageFile;
      
      // 上传图片到Storage，拿到URL
      String imageUrl = await uploadImageToStorage(imageFile);
      
      // 把表单数据和图片URL一起写入Firestore
      await Firestore.instance.collection('todos').document().setData({
        "productTitle": _productTitle,
        "category": _category,
        "contactNumber": _contactNumber,
        "imageUrl": imageUrl // 新增图片URL字段
      });

      // 提交成功后的提示和重置
      showInSnackBar('商品信息已成功保存！');
      _formKey.currentState.reset();
      setState(() {
        _imageFile = null; // 清空图片选择状态
      });
    } catch (e){
      print('Error: $e');
      showInSnackBar('保存失败，请重试：${e.toString()}');
    }
  } else {
    setState(() {
      _autovalidate = true; // 开启自动表单验证，提示用户错误
    });
  }
}

4. 优化图片预览的状态保存（可选） #

你可以在FutureBuilder里把选中的文件缓存到_cachedFile，这样后续上传时不用再等待Future，修改后的FutureBuilder：

FutureBuilder<File>(
  future: _imageFile,
  builder: (BuildContext context, AsyncSnapshot<File> snapshot){
    if (snapshot.connectionState == ConnectionState.done && snapshot.data != null) {
      _cachedFile = snapshot.data; // 缓存选中的文件
      return Image.file(
        snapshot.data,
        height: 150,
        width: 150,
        fit: BoxFit.cover,
      ); // 限制图片尺寸让界面更美观
    } else if (snapshot.error != null) {
      return const Text('选择图片出错了，请重试');
    } else {
      return const Text('还未选择图片');
    }
  },
),

额外小提示：显示上传进度（可选） #

如果想给用户展示上传进度，可以监听UploadTask的快照事件：

UploadTask uploadTask = storageRef.putFile(imageFile);
// 监听上传进度
uploadTask.snapshotEvents.listen((TaskSnapshot snapshot) {
  double progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  print('上传进度：${progress.toStringAsFixed(1)}%');
  // 这里可以更新UI，比如显示一个进度条
});

这样修改后，用户选择图片点击Continue后，就会自动把图片上传到Firebase Storage，然后把生成的URL和表单数据一起存入Cloud Firestore啦。

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