Async / Await uploadTask - PullRequest
Новая
       9

Async / Await uploadTask

0 голосов
/ 05 ноября 2018

Как я могу ждать uploadTask, чтобы я мог загрузить изображение / файл и отследить его ход, прежде чем вставлять загруженный документ url dan в firestore,

Следующий код - мой пример проекта Vue. Он работает должным образом, но посмотрите на if (portraitFile), он должен быть в условии, что я должен загрузить изображение, что если я не хочу загружать изображение?

Он должен выйти за пределы этого условного if, но он будет выполняться асинхронно до завершения файла и получения URL загрузки.

ЦЕЛЬ: Переместить firestore add () за пределы завершающего обратного вызова / аргумента uploadTask. 

    async commitCharacter() {
      try {
        let character = this.character;
        let portraitFile = this.portraitFile;

        if (portraitFile) {
          const uploadTask = storageRef
            .child(`characters/${character.id}/portrait.png`)
            .put(portraitFile, { contentType: "image/png" });

          await uploadTask.on(
            "state_changed",
            snapshot => {
              this.portraitUploadProgress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            },
            null,
            async () => {
              character.portraitUrl = await storageRef
                .child(`characters/${character.id}/portrait.png`)
                .getDownloadURL();

              if (character.id) {
              await db
                .collection("characters")
                .doc(character.id)
                .update(character);
              } else {
                character.id = (await 
                db.collection("characters").add(character)).id;
              }

              $("#manageCharacter").modal("hide");
            }
          );
        }
      }

1 Ответ

0 голосов
/ 04 февраля 2019

Вы можете завернуть свой uploadTask в обещание: 

async function uploadTaskPromise() {
  return new Promise(function(resolve, reject) {
    const storageRef = storage.ref(YOUR_STORAGE_PATH)
    const uploadTask = storageRef.put(YOUR_FILE_OR_BLOB)
    uploadTask.on('state_changed',
      function(snapshot) {
        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        console.log('Upload is ' + progress + '% done')
      },
      function error(err) {
        console.log('error', err)
        reject()
      },
      function complete() {
        task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
          resolve(downloadURL)
        })
      }
    )
  })
}

А затем используйте это так: 

const storageUrl = await uploadTaskPromise()
console.log(storageUrl) // do whatever you want with the URL...
...