如何等待 Firebase 存储图像上传，然后运行下一个功能

Question

我正在尝试编写一个函数，将多个图像上传到 Firebase，保存返回给对象的 URL，然后将该对象上传到我的 Cloud Firestore。 我对 async/await 或 promises 并没有真正的了解，所以如果有人能提供帮助，我将不胜感激。

基本上，我希望uploadImages()完成运行，然后运行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);
        });
      }
    });
  });
},

Answer 1

您必须使用承诺，如解释here 。 您可以重写代码以支持异步等待，因为 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(); }); } }); }); }) },

Answer 2

好的，我根据@AlexBrohshtut 的回答找到了一个解决方案。 我仍然有一个问题，第一个循环完成将允许等待继续，下面的代码似乎解决了这个问题。 如果有人有更简洁的答案，很高兴更新！ （我充其量只是中级...）

 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();
        });
      }
    });
  });
}