Как дождаться загрузки образа хранилища Firebase, затем запустить следующую функцию - PullRequest
Новая
       18

Как дождаться загрузки образа хранилища Firebase, затем запустить следующую функцию

0 голосов
/ 29 марта 2020

Я пытаюсь написать функцию, которая загружает несколько изображений в Firebase, сохраняет URL-адреса, которые возвращаются объекту, а затем загружает этот объект в мой Cloud Firestore. У меня нет четкого понимания async / await или обещаний, поэтому, если кто-нибудь сможет помочь, это будет высоко оценено.

По сути, я хочу, чтобы uploadImages() до конца sh запустился, а затем запустил uploadData(), где saveIssue() запускается при отправке формы.

Вот что я работаю с: 

saveIssue() {
  this.uploadImages();
  this.uploadData();
},
uploadData() {
  let self = this;
  db.collection("issues")
    .add(self.issue)
    .then(docRef => {
      self.$router.push({
        name: "ReportPage",
        params: { issueId: docRef.id }
      });
    })
    .catch(error => {
      console.error(error);
    });
},
uploadImages() {
  const storageRef = storage.ref();
  let self = this;
  this.imagePreviews.forEach(image => {
    let imageName = uuidv1();
    let fileExt = image.fileName.split(".").pop();
    let uploadTask = storageRef
      .child(`images/${imageName}.${fileExt}`)
      .putString(image.base64String, "data_url");
    uploadTask.on("state_changed", {
      error: error => {
        console.error(error);
      },
      complete: () => {
        uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
          self.issue.images.push(downloadURL);
        });
      }
    });
  });
},

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Хорошо, я нашел решение на основе @ ответа AlexBrohshtut . У меня все еще была проблема, когда первая обработка l oop позволила бы продолжить ожидание, код ниже, кажется, исправил это. Рад обновить, если у кого-нибудь есть более краткий ответ! (Я промежуточный в лучшем случае ...) 

 saveIssue() {
  Promise.all(
    this.imagePreviews.map(async image => {
      return await this.uploadImages(image);
    })
  ).then(() => {
    this.uploadData();
  });
},
uploadData() {
  let self = this;
  db.collection("issues")
    .add(self.issue)
    .then(docRef => {
      self.$router.push({
        name: "ReportPage",
        params: {
          issueId: docRef.id
        }
      });
    })
    .catch(error => {
      console.error(error);
    });
},
uploadImages(image) {
  const storageRef = storage.ref();
  let self = this;
  return new Promise((resolve, reject) => {
    let imageName = uuidv1();
    let fileExt = image.fileName.split(".").pop();
    let uploadTask = storageRef
      .child(`images/${imageName}.${fileExt}`)
      .putString(image.base64String, "data_url");
    uploadTask.on("state_changed", {
      error: error => {
        console.error(error);
        reject(error);
      },
      complete: () => {
        uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
          self.issue.images.push(downloadURL);
          resolve();
        });
      }
    });
  });
}
0 голосов
/ 29 марта 2020

Вы должны использовать обещания, как объяснено здесь . Вы можете переписать свой код для поддержки asyn c wait, поскольку firebase поддерживает его «из коробки», но для начала это может выглядеть так: 

async saveIssue() {
    await this.uploadImages();
    await this.uploadData();
  },
  uploadData() {
    return new Promise((resolve, reject) => {
      let self = this;
      db.collection("issues")
        .add(self.issue)
        .then(docRef => {
          self.$router.push({
            name: "ReportPage",
            params: {
              issueId: docRef.id
            }
          });
          resolve();
        })
        .catch(error => {
          console.error(error);
          reject(error);
        });
    })
  },
  uploadImages() {
    return new Promise((resolve, reject) => {
      const storageRef = storage.ref();
      let self = this;
      this.imagePreviews.forEach(image => {
        let imageName = uuidv1();
        let fileExt = image.fileName.split(".").pop();
        let uploadTask = storageRef
          .child(`images/${imageName}.${fileExt}`)
          .putString(image.base64String, "data_url");
        uploadTask.on("state_changed", {
          error: error => {
            console.error(error);
            reject(error);
          },
          complete: () => {
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
              self.issue.images.push(downloadURL);
              resolve();
            });
          }
        });
      });
    })
  },
...