Flutter 如何将图像文件保存到 Firebase 实时数据库答案

【问题标题】：Flutter How to save Image file to Firebase Realtime DatabaseFlutter 如何将图像文件保存到 Firebase 实时数据库
【发布时间】：2021-11-19 12:10:36
【问题描述】：

我想将捕获的图像文件保存到 Firebase 实时数据库，但我似乎无法正确处理。可以请任何人帮忙。我的代码如下：

class TakePictureScreen extends StatefulWidget {
  List<BarcodeItem> value;


  TakePictureScreen({Key? key, required this.value,}) : super(key: key);

  //final String title;

  @override
  _TakePictureScreenState createState() => _TakePictureScreenState();
}

class _TakePictureScreenState extends State<TakePictureScreen> {
  final photos = <File>[];
  FirebaseFirestore firestore = FirebaseFirestore.instance;
  final firestoreInstance = FirebaseFirestore.instance;
  final DatabaseReference databaseRef = FirebaseDatabase.instance.reference().child('ScannedResults');

  void openCamera() {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (_) => CameraCamera(
              onFile: (file) {
                photos.add(file);
                Navigator.pop(context);
                setState(() {});
              },
            )));
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Capture Image"),
      ),

      body: GridView.builder(
        gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemCount: photos.length,
        itemBuilder: (_, index) => Padding(
          padding: const EdgeInsets.all(8.0),

          child: SingleChildScrollView(
            child: Wrap(
              children: [
                Container(
                  width: size.width,

                  child: Image.file(
                    photos[index],
                    fit: BoxFit.cover,
                  ),

                ),
                Container(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ListView.builder(

                      shrinkWrap: true,
                      itemCount: widget.value.length,
                      itemBuilder: (context, position) {
                        return Text(widget.value[position].text.toString().split('%').toString());

                      },

                    ),

                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: FlatButton(
                    color: Colors.grey,
                    child: Text('Save',),
                    onPressed: () {

                      databaseRef.push().set({
                        'ScannedItem': photos
                            .map((barCodeItem) => barCodeItem)
                            .toList(),
                      });

                    },
                  ),
                ),
              ],
            ),
          ),

        ),

      ),

      floatingActionButton: FloatingActionButton(
        onPressed: openCamera,
        child: Icon(Icons.camera_alt),
      ),


    );
  }
}

我正在使用按钮单击“保存”进行保存，请您告诉我我做错了什么。任何帮助将不胜感激。另外，如果有人也知道如何将lisview中返回的数据与图像文件一起保存，我也将不胜感激

【问题讨论】：

标签： flutter firebase-realtime-database

【解决方案1】：

您基本上不能将文件存储在实时数据库中。您必须首先根据您的偏好将图像/文件上传到 Firebase Cloud Storage 或任何其他存储提供商，然后将返回的 URL 保存到数据库（在这种情况下为实时数据库）。

这里是用于 Firebase 云存储的 FlutterFire 文档：https://firebase.flutter.dev/docs/storage/usage

所以基本上伪代码看起来像这样：

List<String> imageURLs = [];
final fss = FirebaseStorageService();
await fss.uploadImagesToCloudStorage().then((List urls) => imageURLs = urls);

FirebaseStorageService 将是 Firebase 云存储的自定义服务类。

【讨论】：