Flutter如何将包含图片的表单数据上传至Firestore

推荐方案：组合使用cloud_firestore + firebase_storage #

这是官方原生支持的最稳定方案，操作逻辑如下：

• 先完成表单本地校验，确认文字字段合规、图片文件有效后，优先将图片上传到firebase_storage
• 图片命名建议用唯一规则，比如用户唯一标识_时间戳_原文件名，避免重名覆盖，上传完成后获取到图片的公开访问链接（downloadURL）
• 将姓名、出生日期等结构化字段，和获取到的图片访问链接拼接为完整数据对象，写入cloud_firestore对应的集合即可

给个Flutter环境下的简化示例代码：

// 1. 上传图片至Cloud Storage
final storageRef = FirebaseStorage.instance
    .ref()
    .child('user_uploads/${DateTime.now().millisecondsSinceEpoch}_avatar.png');
final uploadTask = storageRef.putFile(userSelectedImage);
final uploadSnapshot = await uploadTask.whenComplete(() => {});
final avatarUrl = await uploadSnapshot.ref.getDownloadURL();

// 2. 合并所有数据写入Cloud Firestore
await FirebaseFirestore.instance.collection('user_info').add({
  "name": inputName,
  "birth_date": inputBirthDate,
  "avatar_url": avatarUrl,
  "submit_time": FieldValue.serverTimestamp()
});

注意事项：建议给整套流程加异常捕获，若图片上传失败就不执行后续Firestore写入操作，避免出现残缺数据；如果需要保证操作一致性，可在Firestore写入失败时，同步删除已经上传成功的图片。

其他可选方案 #

• 小图片场景：如果上传的图片体积小于100KB，可以将图片转为base64字符串，直接和其他结构化字段一起写入Firestore，无需额外调用storage插件。该方案仅适合极小体积的图片，base64格式会额外增加33%的数据体积，过大会拖慢Firestore读写速度，也容易触发单文档1MB的大小限制
• 离线提交场景：如果需要支持离线提交表单，可以先将文字数据和图片文件缓存在本地，等网络恢复后先上传图片再同步Firestore数据，Firebase官方SDK本身已支持离线数据持久化，仅需额外实现图片的本地缓存逻辑即可。

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