等待文件中的 Firebase 文件上传 downloadURL 将其存储在对象中

Question

我正在从以下位置上传带有原始 Google 代码的图片： https://firebase.google.com/docs/storage/web/upload-files

    uploadImage(image){       
    var metadata = {
              contentType: 'image/jpeg'
            };
            const file = base64ToFile(image)
            // Upload file and metadata to the object 'images/mountains.jpg'
            var uploadTask = firebase.storage().ref(this.currentUser.uid).child(imgName + '.jpg').put(file, metadata);
        
            // Listen for state changes, errors, and completion of the upload.
            uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
              (snapshot) => {
                // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log('Upload is ' + progress + '% done');
                switch (snapshot.state) {
                  case firebase.storage.TaskState.PAUSED: // or 'paused'
                    console.log('Upload is paused');
                    break;
                  case firebase.storage.TaskState.RUNNING: // or 'running'
                    console.log('Upload is running');
                    break;
                }
              },
              (error) => {
                // A full list of error codes is available at
                // https://firebase.google.com/docs/storage/web/handle-errors
                switch (error.code) {
                  case 'storage/unauthorized':
                    // User doesn't have permission to access the object
                    break;
                  case 'storage/canceled':
                    // User canceled the upload
                    break;
        
                  // ...
        
                  case 'storage/unknown':
                    // Unknown error occurred, inspect error.serverResponse
                    break;
                }
              },
              () => {
                // Upload completed successfully, now we can get the download URL
                uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                  console.log('File available at', downloadURL);
return downloadURL
                });
              }
            );
    }

上传在我的服务中完成，现在我想在我的文件中等待，直到 donwloadURL 准备好，然后将其保存到我的对象中。我需要将 donwloadURL 直接返回到我的文件中，因为我想在上传并最后保存对象后对我的对象做一些其他的事情。是否有机会等待或返回downloadURL？喜欢

this.dataService.uploadImage(file).then(data => { object.url = data })

Answer 1

当您看到then() 时，您可以使用async / await 使代码更易于阅读。因此，您可以根据需要执行此操作：

async () => {
  const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
  console.log('File available at', downloadURL);
}

但您会注意到，我现在还必须将函数本身标记为async。因此，下载 URL 的任何使用都必须发生在这个异步函数本身内。

---

task 本身也是一个承诺（所以，它有一个then），这意味着你也可以在那里使用await。所以如果我们去掉所有的进度报告和错误处理，代码也可以写成：

var metadata = {
  contentType: 'image/jpeg'
};
const file = base64ToFile(image)
const ref = firebase.storage().ref(this.currentUser.uid).child(imgName + '.jpg');
await ref.put(file, metadata);

const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
console.log('File available at', downloadURL);

这里也是，因为我们使用的是await，所以你把这段代码放入的函数必须标记为async，并且downloadURL的任何使用都需要在函数内部，或者你可以再次在调用代码中使用await。

Answer 2

在这里找到搜索的方式：async/await in Firebase Storage (wait to get URL after uploading a file)

return new Promise((resolve, reject) => {
...code before...
 resolve(downloadURL); //instead of return downloadURL
});

为我做的