等待 angularfire 存储上传

Posted 2023-03-22

【中文标题】等待 angularfire 存储上传

【英文标题】：Wait for angularfire storage upload

【发布时间】：2020-12-05 22:23:00

【问题描述】：

我正在执行我的应用程序的“完成您的个人资料”部分，我想将一些图片上传到 Firebase。

这一切都是通过我的“身份验证”服务中的两种方法完成的。我在从上传中获取数据时遇到问题，这是目前的代码：

async updateUserProfile(
    profilePicture: File,
    name: string,
    birthdate: Date,
    countryCode: string,
    photoID: File
  ) 
    let updatedAppUser: authenticatedUser;

    this.appUser.pipe(take(1)).subscribe((currentAppUser) => 
      updatedAppUser = currentAppUser;
    );

    const uploadPackage = new FormData();
    uploadPackage.append(updatedAppUser.UID, profilePicture);
    uploadPackage.append(updatedAppUser.UID + "_", photoID);

    let uploadedData = await this.fileUpload(uploadPackage);
    let profilePicturePath: string;
    let photoIDPath: string;

    //**********************************************
    //HERE IS THE PROBLEM-- I THINK THIS IS WRONG
    //**********************************************
    if (uploadedData) 
      profilePicturePath = uploadedData[0];
      photoIDPath = uploadedData[1];
    

    //TO-DO: call backend and update the user profile

    //after success from backend call
    //console.log("photoID Path: ", photoIDPath);
    updatedAppUser.showKYC = false;
    updatedAppUser.userProfilePicture = profilePicturePath;
    updatedAppUser.isPendingValidation = true;
    updatedAppUser.userName = name;
    updatedAppUser.userBirthdate = birthdate;
    updatedAppUser.userCountryCode = countryCode;

    //save to local storage
    this.storeAuthData(updatedAppUser);

    //new updated appuser
    this.appUser.next(updatedAppUser);
  

这是我用来将数据上传到 Firebase 的方法：

private async fileUpload(data: FormData) 
    const filePaths: string[] = [];
    const promises: AngularFireUploadTask[] = [];

    for (const value of data.entries()) 
      const uploadTask = this.firebaseStorage.ref(value[0]).put(value[1]);

      promises.push(uploadTask);
    

    const promiseArray = await Promise.all(promises);
    if (promiseArray) 
      promiseArray.forEach(async (filePromise) => 
        filePaths.push(await filePromise.ref.getDownloadURL());
      );

      return filePaths;
    
  

【参考方案1】：

我可能会使用第二个 Promise.all 来检索下载 URL，并删除使用 await，因为它会使事情变得混乱：

  private async fileUpload(data: FormData) 
    const promises: AngularFireUploadTask[] = [];

    for (const value of data.entries()) 
      const uploadTask = this.firebaseStorage.ref(value[0]).put(value[1]);

      promises.push(uploadTask);
    

    Promise.all(promises).then((tasksArray) => 
      const filePaths = tasksArray.map((task) => task.ref.getDownloadURL());

      return Promise.all(filePaths);