如何等待Firebase文件上传完成获取downloadURL并存入业务对象

你可以将上传逻辑包裹在Promise实例中，成功时resolve下载URL，失败时reject错误，即可实现你需要的链式调用写法。修改后的完整代码如下：

uploadImage(image) {
  // 返回Promise实例向外传递异步结果
  return new Promise((resolve, reject) => {
    var metadata = {
      contentType: 'image/jpeg'
    };
    const file = base64ToFile(image)
    // 注意：原代码中的imgName变量请确保在作用域内已正确赋值，避免引用报错
    var uploadTask = firebase.storage().ref(this.currentUser.uid).child(imgName + '.jpg').put(file, metadata);

    // 监听上传状态、错误、完成事件
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // 原有进度监听逻辑保持不变
        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');
        switch (snapshot.state) {
          case firebase.storage.TaskState.PAUSED:
            console.log('Upload is paused');
            break;
          case firebase.storage.TaskState.RUNNING:
            console.log('Upload is running');
            break;
        }
      },
      (error) => {
        // 上传失败时reject错误，可先保留原有错误分类处理逻辑
        reject(error)
        switch (error.code) {
          case 'storage/unauthorized':
            // 用户无访问权限的处理逻辑
            break;
          case 'storage/canceled':
            // 用户取消上传的处理逻辑
            break;
          case 'storage/unknown':
            // 未知错误的处理逻辑
            break;
        }
      },
      () => {
        // 上传完成获取到下载地址后resolve结果
        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
          console.log('File available at', downloadURL);
          resolve(downloadURL)
        });
      }
    );
  })
}

修改完成后你就可以用你期望的方式调用：

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

也支持async/await写法，更适合多异步逻辑的业务场景：

// 业务代码如果在async函数内可以直接await取值
async function handleBusinessSave() {
  // 其他前置业务逻辑
  const imgUrl = await this.dataService.uploadImage(file)
  object.url = imgUrl
  // 后续完成所有业务字段处理后统一保存对象
}

内容的提问来源于stack exchange，提问作者bastifix