“在Firebase Flutter中上传多个图像的x数量”

huangapple go评论65阅读模式
英文:

getting the x number of multiple images being uploaded in firebase flutter

问题

我目前有一个用于存储本地图像、将其上传到Firestore存储并将其写入Cloud Firestore的工作代码。现在一切都正常工作。但是,我正在处理指示器的用户界面。
我希望用户能看到他们上传了多少张图片,例如"已上传10张中的1张"。我看不到类似的逻辑,或者可能我不知道如何做,任何想法都会非常感激。

未来 uploadImage() async {
    String catchUrls;
    // 循环,重复遍历存储在 List<XFile> imageFileList 中的文件
    for (var image in imageFileList!) {
      // 创建新的文件名
      String uniqueFileName = DateTime.now().microsecondsSinceEpoch.toString();
      // 获取当前文件名
      String currentFileName = image.path;
      // 用新文件名替换
      String newFileName =
          currentFileName.replaceAll(currentFileName, uniqueFileName);
      // 引用文件的位置。
      Reference reference =
          FirebaseStorage.instance.ref().child("images").child(newFileName);
      // 上传文件
      await reference.putFile(File(image.path));
      // 获取下载链接
      catchUrls = await reference.getDownloadURL();
      // 将下载链接存储到 List<String> getDownloadUrls 中。
      getDownloadUrls.add(catchUrls);
      print(getDownloadUrls);
    }
  }
英文:

I currently have a working code for storing the local images, uploading it in firestore storage and writing it on cloud firestore. It's all working now. However I am working with the UI for indicators.
I want the user to see how many of their images have been uploaded for example "uploaded 1 out of 10 of images". I can't see a similar logic or maybe i do not have any clue on how to do it, any ideas are greatly appreciated.

Future uploadImage() async {
    String catchUrls;
    // loop, reiterate the files stored in List&lt;XFile&gt; imageFileList
    for (var image in imageFileList!) {
      // create new file name
      String uniqueFileName = DateTime.now().microsecondsSinceEpoch.toString();
      // get current file name
      String currentFileName = image.path;
      // replace with new file na,e
      String newFileName =
          currentFileName.replaceAll(currentFileName, uniqueFileName);
      // reference the location of file.
      Reference reference =
          FirebaseStorage.instance.ref().child(&quot;images&quot;).child(newFileName);
      // upload file
      await reference.putFile(File(image.path));
      // get the download urls
      catchUrls = await reference.getDownloadURL();
      // store the download urls to the List&lt;String&gt;getDownloadUrls.
      getDownloadUrls.add(catchUrls);
      print(getDownloadUrls);
    }
  }

答案1

得分: 1

你可以像以下这样使用 StreamController

StreamController<int> streamController = StreamController();

Future uploadImage() async {
  String catchUrls;
  // 循环,重复处理存储在 List<XFile> imageFileList 中的文件
  for (var image in imageFileList!) {
    // 创建新文件名
    String uniqueFileName = DateTime.now().microsecondsSinceEpoch.toString();
    // 获取当前文件名
    String currentFileName = image.path;
    // 替换为新文件名
    String newFileName =
        currentFileName.replaceAll(currentFileName, uniqueFileName);
    // 引用文件的位置
    Reference reference =
        FirebaseStorage.instance.ref().child("images").child(newFileName);
    // 上传文件
    await reference.putFile(File(image.path));
    // 获取下载链接
    catchUrls = await reference.getDownloadURL();
    // 将下载链接存储到 List<String> getDownloadUrls 中
    getDownloadUrls.add(catchUrls);
    streamController.add(getDownloadUrls.length);
    print(getDownloadUrls);
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Hello'),
    ),
    body: Center(
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () async {
              await uploadImage();
            },
            child: const Text('Upload Images'),
          ),
          StreamBuilder<int>(
            stream: streamController.stream,
            initialData: 0,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(
                    'uploaded ${snapshot.data} out of ${imagesFileList.length} of images');
              }
              return Text('Waiting...');
            },
          ),
        ],
      ),
    ),
  );
}

在每次将图像添加到 FirebaseStorage 时,您都将 getDownloadedUrl 的长度添加到流中。在 StreamBuilder 中,您获取了该长度。

英文:

You can use StreamController like following:

 StreamController&lt;int&gt; streamController = StreamController();

 Future uploadImage() async {
    String catchUrls;
    // loop, reiterate the files stored in List&lt;XFile&gt; imageFileList
    for (var image in imageFileList!) {
      // create new file name
      String uniqueFileName = DateTime.now().microsecondsSinceEpoch.toString();
      // get current file name
      String currentFileName = image.path;
      // replace with new file na,e
      String newFileName =
          currentFileName.replaceAll(currentFileName, uniqueFileName);
      // reference the location of file.
      Reference reference =
          FirebaseStorage.instance.ref().child(&quot;images&quot;).child(newFileName);
      // upload file
      await reference.putFile(File(image.path));
      // get the download urls
      catchUrls = await reference.getDownloadURL();
      // store the download urls to the List&lt;String&gt;getDownloadUrls.
      getDownloadUrls.add(catchUrls);
      streamController.add(getDownloadUrl.length);
      print(getDownloadUrls);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(&#39;Hello&#39;),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () async {
                await uploadImage();
              },
              child: const Text(&#39;Upload Images&#39;),
            ),
            StreamBuilder&lt;int&gt;(
              stream: streamController.stream,
              initialData: 0,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                      &#39;uploaded ${snapshot.data} out of ${imagesFileList.length} of images&#39;);
                }
                return Text(&#39;Waiting...&#39;);
              },
            ),
          ],
        ),
      ),
    );
  }

Here at every iteration of adding image to FirebaseStorage you are adding length of getDownloadedUrl to the stream. And in StreamBuilder you are getting that length.

huangapple
  • 本文由 发表于 2023年7月13日 15:13:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76676797.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定