时间戳

首页 > 解决方案 > 为什么我的文件没有按顺序上传到 Firestore？

javascript - 为什么我的文件没有按顺序上传到 Firestore？

问题描述

我目前正在尝试使用 Vue 2、Vuetify 和 Firebase/Firestore 制作图像上传器。目前，我的图片已成功上传到 Firestore，参考下载 URL 存储在一个名为“images”的数组中，但它们并没有像我的前端那样按顺序存储。

这是当前选择要上传的文件的前端外观：

在前端选择的文件

按提交演示文稿时，我让它在控制台中打印文件： https ://i.imgur.com/GSQqYtM.png

控制台中的文件

如您所见，它们按顺序打印，但出现的另一个问题是图像不会发送到 Firebase 数据库，但它们仍会上传到 Firestore。要让它显示在 Firebase 数据库中，我必须再次按下提交演示文稿按钮，否则 Firebase 中的数组将仅显示为图像：[]。这是我认为的另一个问题，但它可能有助于找出主要问题。

当我再次按下提交演示文稿时，图像数组会随每个下载 URL 更新，但不是按顺序更新：

来自 Firebase 的图像数组

它说 Slide1 然后是 Slide3、Slide12、Slide9 等。我不知道为什么会这样。即使在 Firestore 中，它们也不按顺序排列。这与 Firebase 数据库中的顺序完全不同。

火库

这是按下提交演示文稿按钮时我处理文件上传的方式：

    uploadImages() {
      if (this.files) {
        this.files.forEach(file => {
          var storageRef = fb.storage().ref('presentations/' + file.name);
          //storageRef.put(file);

          let uploadTask = storageRef.put(file);

          uploadTask.on('state_changed', (snapshot) => {

          }, (error) => {
            //Errors handled her
          }, () => {
            uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
              this.presentation.images.push(downloadURL);
            })
          })
          console.log(file);
          db.collection("presentations").doc("mainPresentation").update(this.presentation)
        })
      }
    }

我只是希望图像按照选择它们的顺序存储，因为您可能已经注意到，这些是演示图像，所以当我必须从 Firebase 读取时，我不希望演示图像以不同的顺序显示.

将不胜感激任何帮助，谢谢！

标签： javascriptfirebasevuejs2google-cloud-firestorefirebase-storage

解决方案

两件事情。

首先，您将同时异步启动所有这些上传。由于它们都是同时发生的，它们可以以不同的顺序完成。如果您需要它们按顺序发生，那么您应该等待第一个完成，然后再开始第二个。我建议不要担心它，然后根据需要对数据进行排序。

此外，您在 Cloud Storage 控制台中看到的文件的排序顺序是字典顺序，而不是数字顺序。按字典顺序，“11”在“2”之前，因为第一个字符“1”的 ascii 值小于“2”。如果你真的想看到按数字排序的文件，你应该用零填充数字，以便词法排序与数字排序相匹配。例如，“001”、“002”、“003”等。

推荐阅读