Flutter Firebase 存储数据不会立即显示数据

Question

我目前正在开发一个 flutter 项目，我想在 Firebase 存储中存储上传的数据。这工作正常，但现在我在显示数据时遇到了问题。我必须重新启动才能在我的列表中显示上传的数据。

希望有人能帮我解决这个问题。

onPressed: () async {
  FilePickerResult? result = await FilePicker.platform
      .pickFiles(allowMultiple: true);
  if (result == null) return;

  final path = result.files.single.path!;

  setState(() {
    
  });
  final fileName = result.files.single.name;

  storage
      .uploadFile(path, fileName)
      .then((value) => print('Done'));
},

这是我按下按钮时的呼叫功能。

Future<void> uploadFile(String destination, String fileName) async {
    final User? user = auth.currentUser;
    final uid = user!.uid;
    File file = File(destination);
    try {
      await storage.ref('$uid/$fileName').putFile(file);
    } on firebase_core.FirebaseException catch (e) {
      print(e);
    }
  }

这是我将数据推送到 firebase 存储的方法。

Container(
  width: MediaQuery.of(context).size.width - 15,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(25),
  ),
  child: FutureBuilder(
    future: _loadImages(),
    builder: (context,
        AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return Row(
          children: [
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data?.length ?? 0,
                itemBuilder: (context, index) {
                  final Map<String, dynamic> image =
                      snapshot.data![index];

                  return Card(
                    shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(20)),
                    elevation: 0,
                    child: ListTile(
                      dense: false,
                      contentPadding: EdgeInsets.all(15),
                      leading: Image.network(
                        image['url'],
                      ),
                      trailing: IconButton(
                        onPressed: () => _delete(image['path']),
                        icon: const Icon(
                          Icons.delete,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      }

      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  ),
),

这就是我在应用程序中显示文件的方式。

期待您的帮助。

我想在将数据上传到 Firebase 存储时直接看到我的数据。

Answer 1

如果您想立即显示新上传的图片，则必须强制刷新呈现图片列表的代码。如果您使用 StatefulWidget 来渲染图像，您可以在上传完成后在该小部件上调用 setState()。如果您使用的是另一种状态管理方法，则可以为该方法执行等效操作。

但请注意，这仅适用于上传图片的用户的设备。如果任何其他设备手动重新启动图像列表的渲染，它们仍然只能看到新图像。

解决此问题的一种常见方法是将图像 URL 列表存储在 Firebase 的一个数据库（实时数据库或 Cloud Firestore）中，然后使用 StreamBuilder 从那里呈现它。 StreamBuilder 继续监听数据库的更新，所以如果一个用户的图片上传完成并且他们将图片的 URL/path 写入数据库，这会立即刷新图片列表，而不仅仅是在他们的设备上，但在所有其他连接的设备上也是如此。

Flutter Firebase 存储数据不会立即显示数据

Flutter Firebase Storage Data doesn't show Data immediately

flutter

firebase-storage