Flutter：如何使用集合内的 Firestore 字段在应用程序中上传图像

Question

...................................................我不是在问如何用户可以使用身份验证上传他/她的图像。 我在问如何使用 firestore(firebase) 更改应用程序内的图像，或者如何通过从我们的桌面上传图像来更改应用程序内的标题图像。 ..................................................... ..................................................... .............................这是我的代码

 body: StreamBuilder(
      stream: Firestore.instance.collection('Event').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
         const Text('No Event');
        } 
        else if(snapshot.hasError){ const Text('No data avaible right now'); } 
        else {
          return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                DocumentSnapshot myEvent = snapshot.data.documents[index];

                 
                return ListView(
                  shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
                // scrollDirection: Axis.vertical,
                  children: <Widget>[
                    //1st box

                  Container(
                      margin: EdgeInsets.all(
                          SizeConfig.safeBlockHorizontal * 4),
                      child: Container(
                        child: new FittedBox(
                          child: Material(
                            // color: Colors.white,
                            elevation: 14.0,
                            borderRadius: BorderRadius.circular(24.0),
                            shadowColor: Color(0x802196F3),
                            child: Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Container(
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                        left:
                                            SizeConfig.safeBlockHorizontal *
                                                4),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Text(
                                            '${myEvent['date_1']}',
                                            style: TextStyle(
                                                color: Colors.black54,
                                                fontSize: 24.0,
                                                fontWeight:
                                                    FontWeight.bold),
                                          )),
                                        ),
                                        SizedBox(
                                          height: 10,
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment
                                                    .spaceEvenly,
                                            children: <Widget>[
                                             
                                            ],
                                          )),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                             
                                Container(
                                  width:
                                      SizeConfig.safeBlockHorizontal * 60,
                                  height:
                                      SizeConfig.safeBlockHorizontal * 55,
                                  child: ClipRRect(
                                    borderRadius:
                                        new BorderRadius.circular(24.0),
                                    child: Image.network(
                                      '${myEvent['image_1']}',
                                      fit: BoxFit.fill,
                                      alignment: Alignment.topRight,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),

---

Answer 1

如果您在 Firestore 中同时拥有图像和标题，那么您需要使用新的标题和图像更新数据库。 要更新图像，您需要使用image_picker插件重新上传图像：

Future getImage() async {
  var firebaseUser = await FirebaseAuth.instance.currentUser();
  var image = await ImagePicker.pickImage(source: ImageSource.gallery);

   if (image != null) {
        StorageReference ref = FirebaseStorage.instance.ref();
        StorageTaskSnapshot addImg = await ref.child("image/img").putFile(image).onComplete;
        if (addImg.error == null) {
          final String downloadUrl =
                await addImg.ref.getDownloadURL();
            await Firestore.instance
                .collection("user")
                .document(firebaseUser.uid)
                .updateData({"url": downloadUrl, "name": imageName});
        }
      }
}

所以在这里你得到一个新图像，将它添加到 Firebase 存储，然后使用updateData()你可以在数据库中更新图像名称和 img url。

Answer 2

我找到了一种在我们的应用程序中随时更改图像的最简单方法：步骤 1- 使用上述图像网络代码步骤 2- 将我们的图像上传到 fire base 存储步骤 3- 复制图像地址并将其粘贴到您的图像字段中收藏，图像将在您的应用程序中自动更新