如何从Firebase获取Ionic上传图片的URL并存入对应数据库节点？

Hey there! Let's fix that image URL issue you're having. The core problem here is that Firebase's getDownloadURL() returns a Promise (it's asynchronous), so you can't just assign it directly to this.Url and expect the actual URL string to be stored in your database. Here's how to adjust your code step by step:

1. Fix the takePhoto method to wait for upload and URL retrieval #

You need to await both the image upload operation and the download URL call to ensure you get a valid string URL, not a pending Promise:

async takePhoto(sourceType: number) {
  try {
    const options: CameraOptions = {
      quality: 50,
      targetHeight: 100,
      targetWidth: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType: sourceType
    };
    const result = await this.camera.getPicture(options);
    const image = `data:image/jpeg;base64,${result}`;
    const pictureRef = storage().ref('pictures/myphotos');
    
    // Wait for the image to finish uploading to Storage
    await pictureRef.putString(image, 'data_url');
    
    // Now fetch the actual download URL and assign it
    this.Url = await pictureRef.getDownloadURL();
    console.log("Successfully got image URL:", this.Url); // Verify here
  } catch(e){
    console.error("Error during photo upload:", e);
  }
}

2. Correct typos and validate URL in addShopppingItem #

I noticed a typo (temDescription instead of itemDescription) in your database push call—fix that, and add a check to ensure the URL is ready before saving:

addShopppingItem(shoppingItem: ShoppingItem){
  // Prevent submission if image URL isn't ready yet
  if (!this.Url) {
    console.error("Image URL not available! Please upload a photo first.");
    return;
  }
  
  this.shoppingItemRef$.push({
    itemName: this.shoppingItem.itemName,
    itemFee: this.shoppingItem.itemFee,
    itemDescription: this.shoppingItem.itemDescription, // Fixed typo
    itemInstructions: this.shoppingItem.itemInstructions,
    itemCategory: this.shoppingItem.itemCategory,
    itemDelivery: this.shoppingItem.itemDelivery,
    url: this.Url // Now this is a valid URL string
  })
}

3. Optional: Add a loading state to avoid premature submission #

To prevent users from clicking "Submit" before the image upload finishes, add a loading flag to your component:

• In your component class:

isUploading = false;

async takePhoto(sourceType: number) {
  this.isUploading = true;
  try {
    // ... existing takePhoto code ...
  } catch(e){
    console.error(e);
  } finally {
    this.isUploading = false;
  }
}

• Update your template button:

<button ion-button (click)="addShopppingItem(shoppingItem)" [disabled]="isUploading"> 
  {{ isUploading ? 'Uploading Image...' : 'Submit' }} 
</button>

Why this works: #

• putString is asynchronous, so using await ensures the image is fully uploaded to Firebase Storage before we request its URL.
• getDownloadURL() also requires await to resolve the Promise into a usable URL string, instead of storing a Promise object in your database.
• The typo fix ensures your description field is saved correctly to the database.

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