Firebase storage загружает несколько файлов и сразу получает их URL-адреса для загрузки

#javascript #firebase-storage

# #javascript #firebase-хранилище

Вопрос:

Я хочу загрузить несколько файлов с помощью Firebase Firestore и сразу получить их URL-адреса для загрузки, вот как я это сделал.

  const promises = [];

    imgFileList.forEach((file, index) => {
      const uploadTask = storage.ref(`instagram/${file.name}`).put(file);
      promises.push(uploadTask);
      uploadTask.on(
        'state_changed',
        (snapshot) => {},
        (err) => alert(err.code),
        async () => {
          const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
          console.log(downloadURL, index);
        }
      );
    });

    Promise.all(promises)
      .then(() => {
        console.log(uploadedMediaList, 'all');
      })
      .catch((err) => alert(err.code));
 

и это то, что я получил

Результат

как вы можете видеть, в приведенном выше коде я Promises.all() массив promises , и он не возвращает URL-адрес загрузки в порядке, как я ожидал, пожалуйста, покажите мне, как с этим бороться, я хочу получить список URL-адресов загрузки в then блоке of Promise.all() . Большое вам спасибо, и я прошу прощения за мой плохой английский. Хорошего вам дня

Ответ №1:

Когда вы обращаетесь put к ссылке на хранилище, она возвращает обещание. Таким образом, вам не нужно использовать on прослушиватель, но вместо этого вы можете просто дождаться разрешения этого обещания перед вызовом getDownloadURL() .

 const promises = imgFileList.map((file, index) => {
  let ref = storage.ref(`instagram/${file.name}`);
  return ref.put(file).then(() => ref.getDownloadURL());
})
Promise.all(promises)
  .then((uploadedMediaList) => {
    console.log(uploadedMediaList, 'all');
  })
  .catch((err) => alert(err.code));