我想在实时数据库中保存多个图像 url，但每次旧图像 url 都在颤振中替换为新图像 url

Posted 2023-02-23

【中文标题】我想在实时数据库中保存多个图像 url，但每次旧图像 url 都在颤振中替换为新图像 url

【英文标题】：i want to save multiple images url in realtime database but every time old image url replace by new image url in flutter

【发布时间】：2021-09-22 05:08:21

【问题描述】：

我想在实时数据库中保存多个图像 URL，但每次旧图像 URL 都会在颤振中替换为新图像 URL

请帮助解决这个问题。我是新来的

这是我的代码：-

颤动 正如您在颤振代码中看到的那样，我正在尝试在 firebase 存储中上传多个图像并将图像 url 存储在 firebase 实时数据库中

import 'dart:io';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_storage/firebase_storage.dart'; 
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as Path;

void main() async 
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp();
 runApp(MyApp());


class MyApp extends StatelessWidget 
 @override
 Widget build(BuildContext context) 
  return MaterialApp(
  home: MyHomePage(),
  );
  


class MyHomePage extends StatefulWidget 
 @override
 _MyHomePageState createState() => _MyHomePageState();
 

class _MyHomePageState extends State<MyHomePage> 
  Reference reference = FirebaseStorage.instance.ref();

  List<File> imageList = [];
  File? image;
  final picker = ImagePicker();
  int i = 0;
  final databaseRef = FirebaseDatabase.instance.reference();

Future _upload() async 
for (var img in imageList) 
  reference = FirebaseStorage.instance
      .ref()
      .child('images/$Path.basename(img.path)');
  await reference.putFile(img).whenComplete(() async 
    reference.getDownloadURL().then((value) 
      i++;
      databaseRef.child("All Data").child("Images").set("$i": value);
    );
  );
 


@override
Widget build(BuildContext context) 
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;

return Scaffold(
  appBar: AppBar(
    title: Text("Image upload in firebase flutter"),
  ),
  body: Center(
    child: Column(
      children: [
        Container(
          margin: EdgeInsets.only(left: 15, right: 15),
          height: height * 0.18,
          child: Row(
            children: [
              InkWell(
                child: Container(
                  width: width * 0.30,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(10)),
                  margin: EdgeInsets.only(right: 10),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.photo_camera,
                        color: Colors.blue.shade900,
                        size: 32,
                      ),
                      Text(
                        "Add Image",
                        style: TextStyle(
                            fontSize: 16, color: Colors.blue.shade900),
                      )
                    ],
                  ),
                ),
                onTap: () 
                  chooseImages();
                ,
              ),
              imageList == null
                  ? Container()
                  : Expanded(child: imagesData(imageList))
            ],
          ),
        ),
        InkWell(
          onTap: () 
            _upload();
          ,
          child: Container(
            width: 100,
            height: 50,
            color: Colors.blue,
            child: Text("Upload"),
          ),
        )
      ],
    ),
  ),
);


chooseImages() async 
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() 
  imageList.add(File(pickedFile!.path));
);
if (pickedFile == null) retrieveLostData();
 

Future<void> retrieveLostData() async 
final LostData response = await picker.getLostData();
if (response.isEmpty) 
  return;

if (response.file != null) 
  setState(() 
    imageList.add(File(response.file!.path));
  );
 else 
  print(response.file);



Widget imagesData(List<File>? imageList) 
return ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: imageList!.length,
    itemBuilder: (context, index) 
      return Container(
        width: MediaQuery.of(context).size.width * 0.30,
        height: MediaQuery.of(context).size.height * 0.17,
        margin: EdgeInsets.only(left: 2, right: 2),
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
        child: Stack(children: [
          Container(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(25),
              child: Image.file(
                imageList[index],
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.17,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned(
            child: InkWell(
              onTap: () 
                print("$imageList[index]");
                setState(() 
                  imageList.remove(imageList[index]);
                );
              ,
              child: Icon(
                Icons.cancel,
                color: Colors.white,
              ),
            ),
            right: 10,
            top: 10,
          )
        ]),
      );
    );
   
 

代码结束。

【参考方案1】：

您的问题出在这部分代码中：

 databaseRef.child("All Data").child("Images").set("$i": value);

您总是覆盖相同的路径。尝试使用push 而不是set：

 databaseRef.child("All Data").child("Images").push("$i": value);

【讨论】：

是的，但我想显示像图像这样的图像：1：imageurl 2：iamgeurl

您的问题是关于saving 的数据，而不是如何显示它。如果您不知道如何显示数据，请写一个新问题。