如何显示firebase存储文件上传进度

Question

我正在尝试在进度指示器中显示我上传到 Firebase 存储的文件的进度，我该如何实现？

注意我是同时上传两个文件的。

这是我的代码。

Future<String?> _uploadFileToStorage(BuildContext context,File file, path) async {
    try {
      var task = _firebaseStorage.ref().child(path);
      var status = await task.putFile(file);
    print(status.state);
      return task.getDownloadURL();
    } catch (err) {
      print(err.toString());
    }
  }

Answer 1

首先获取变量 bool load 并在您的函数开始时创建初始 load=false 并在函数结束时创建 load=true 然后在函数结束时 load=false，所以在您的父小部件 load==true?CircularProgressIndicator():Scaffold(), 所以你在这里发挥作用

Future<String?> _uploadFileToStorage(BuildContext context,File file, path) async {

        try {
       setState({
          load=true;
            });
          var task = _firebaseStorage.ref().child(path);
          var status = await task.putFile(file);
        print(status.state);
          return task.getDownloadURL();
        setState({
            load=false;
              })
        } catch (err) {
          print(err.toString());
      setState({
            load=false;
              })
        }
      }

Answer 2

您只需使用以下代码即可跟踪上传进度：

status.snapshotEvents.listen((TaskSnapshot snapshot) {
        print('Task state: ${snapshot.state}');
        print('Progress: ${(snapshot.bytesTransferred / snapshot.totalBytes) * 100} %');

        switch (snapshot.state) {
          case TaskState.paused:
            // TODO: Handle this case.
            break;
          case TaskState.running:
            return CircularProgressIndicator(
                value: (snapshot.bytesTransferred > 0 && snapshot.totalBytes > 0) ? snapshot.bytesTransferred / snapshot.totalBytes : null);

            break;
          case TaskState.success:
            // TODO: Handle this case.
            break;
          case TaskState.canceled:
            // TODO: Handle this case.
            break;
          case TaskState.error:
            // TODO: Handle this case.
            break;
        }
      }, onError: (e) {
        // The final snapshot is also available on the status via `.snapshot`,
        // this can include 2 additional states, `TaskState.error` & `TaskState.canceled`
        print(status.snapshot);
      });