Почему мои файлы, загружаемые в Firestore, не загружаются по порядку? - PullRequest
0 голосов
/ 19 апреля 2019

В настоящее время я пытаюсь создать загрузчик изображений, используя Vue 2, Vuetify и Firebase / Firestore.В настоящее время мои изображения успешно загружаются в Firestore, а ссылочный URL-адрес для загрузки сохраняется в массиве с именем «images», но они хранятся не в том порядке, в котором они отображаются на моем веб-интерфейсе.

В настоящее время этоИнтерфейс выглядит следующим образом: файлы, выбранные для загрузки:

files selected on frontend

При нажатии кнопки «Отправить презентацию» он выводит файлы в консоли: https://i.imgur.com/GSQqYtM.png

files in console

Как видите, они печатаются по порядку, но возникает еще одна проблема: изображения не отправляются в базу данных Firebase, а загружаются в Firestore.Чтобы он отображался в базе данных Firebase, мне нужно было бы снова нажать кнопку «Отправить презентацию», иначе массив в Firebase будет просто отображаться в виде изображений: [].Я полагаю, что это совершенно другая проблема, но она может помочь выяснить основную проблему.

Когда я снова нажимаю Submit Presentation, массив изображений обновляется с каждым URL-адресом для загрузки, но не по порядку:

images array from Firebase

Там написано Слайд1, затем Слайд3, Слайд12, Слайд9 и т. Д. Я понятия не имею, почему это происходит.Даже в Firestore они не в порядке.Это совершенно другой порядок, чем в базе данных Firebase.

Firestore

Вот как я обрабатываю загрузку файлов при нажатии кнопки «Отправить презентацию»:

    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, я не хочу, чтобы изображения презентаций отображались вдругой заказ.

Буду признателен за любую помощь, спасибо!

1 Ответ

0 голосов
/ 19 апреля 2019

Две вещи.

Во-первых, вы запускаете все эти загрузки асинхронно, одновременно.Поскольку все они происходят одновременно, они могут закончить в другом порядке.Если вам нужно, чтобы они происходили по порядку, то вам следует подождать, пока первый завершится, прежде чем запустить второй.Я предлагаю не беспокоиться об этом, а затем сортировать данные по мере необходимости.

Кроме того, порядок сортировки файла, который вы видите в консоли Cloud Storage, является лексикографическим, а не числовым.Лексикографически, «11» предшествует «2», потому что значение ascii для первого символа «1» меньше, чем «2».Если вы действительно хотите, чтобы файлы были отсортированы по номерам, вы должны дополнить числа нулями, чтобы лексическая сортировка соответствовала числовой сортировке.Например, «001», «002», «003» и т. Д.

...