如何返回上载到firebase存储的图像的下载URL

我想将一个图像上传到firebase（它正在工作），然后返回图像的下载URL并将其存储为字符串

这是我的密码：

uploadImage=async（uri，imageName）=>{
常量响应=等待获取（uri）；
const blob=wait response.blob（）；
firebase.storage（）.ref（）.child（imageName）.put（blob）
。然后（snap=>{
返回snap.ref.getDownloadURL（）；
})
。然后（下载URL=>{
返回下载URL；
})
.catch（错误=>{
log（`上载文件时出错。\n\n${error}`）；
});
}

图像可以上传到firebase存储。目前，当我尝试将上传图像的URL写入数据库时，它仅显示以下内容：

下面是我创建用户记录的代码块：

firebase
.auth（）
.createUserWithEmailAndPassword（this.state.email，this.state.password）
。然后（userCredentials=>{
让imageUrl=''；
设db=firebase.database（）.ref（'users/'+userCredentials.user.uid）；
if（this.state.image）{
imageUrl=this.uploadImage（this.state.image.uri，`images/user-${userCredentials.user.uid}`）；
}
数据库集({
电子邮件：this.state.email，
imageUrl:imageUrl，
用户名：this.state.username
});
返回userCredentials.user.updateProfile({
显示名称：this.state.username
});
})
.catch（error=>this.setState（{errorMessage:error.message}））；

在您的

uploadImage

函数中，您正在链接承诺，但不返回链接。您应按如下方式对其进行调整：

uploadImage = async (uri, imageName) => {
    const response = await fetch(uri);
    const blob = await response.blob();

    return firebase.storage().ref().child(imageName).put(blob)  // <-- Here return the chain
      .then(snap => {
        return snap.ref.getDownloadURL();
      })
      .then(downloadURL => {
        return downloadURL;
      })
      .catch(error => {
        console.log(`An error occurred while uploading the file.\n\n${error}`);
      });
  }

uploadImage = async (uri, imageName) => {

    try {
        const response = await fetch(uri);
        const blob = await response.blob();

        const snap = await firebase.storage().ref().child(imageName).put(blob);

        const downloadURL = await snap.ref.getDownloadURL();

        return downloadURL;

    } catch (e) {
        console.error(e);
        throw e;
    }

}

try {
     const userCredentials = await firebase
        .auth()
        .createUserWithEmailAndPassword(this.state.email, this.state.password);

     let imageUrl = '';

     const db = firebase.database().ref('users/' + userCredentials.user.uid);

     if (this.state.image) {

        imageUrl = await this.uploadImage(this.state.image.uri, `images/user-${userCredentials.user.uid}`);

        await db.set({
            email: this.state.email,
            imageUrl: imageUrl,
            username: this.state.username
          });


          return userCredentials.user.updateProfile({
            displayName: this.state.username
          });

     }
     //You should probably manage the else case

} catch (e) {
     this.setState({ errorMessage: e.message })
}

然后，因为这个

uploadImage

函数是异步的，所以您应该调整调用它的方式。我建议修改代码的其他部分，如下所示：

uploadImage = async (uri, imageName) => {
    const response = await fetch(uri);
    const blob = await response.blob();

    return firebase.storage().ref().child(imageName).put(blob)  // <-- Here return the chain
      .then(snap => {
        return snap.ref.getDownloadURL();
      })
      .then(downloadURL => {
        return downloadURL;
      })
      .catch(error => {
        console.log(`An error occurred while uploading the file.\n\n${error}`);
      });
  }

uploadImage = async (uri, imageName) => {

    try {
        const response = await fetch(uri);
        const blob = await response.blob();

        const snap = await firebase.storage().ref().child(imageName).put(blob);

        const downloadURL = await snap.ref.getDownloadURL();

        return downloadURL;

    } catch (e) {
        console.error(e);
        throw e;
    }

}

try {
     const userCredentials = await firebase
        .auth()
        .createUserWithEmailAndPassword(this.state.email, this.state.password);

     let imageUrl = '';

     const db = firebase.database().ref('users/' + userCredentials.user.uid);

     if (this.state.image) {

        imageUrl = await this.uploadImage(this.state.image.uri, `images/user-${userCredentials.user.uid}`);

        await db.set({
            email: this.state.email,
            imageUrl: imageUrl,
            username: this.state.username
          });


          return userCredentials.user.updateProfile({
            displayName: this.state.username
          });

     }
     //You should probably manage the else case

} catch (e) {
     this.setState({ errorMessage: e.message })
}

---

“当我尝试将其写入数据库时”->您如何写入数据库？你能分享相应的代码吗？我已经写了一个答案，见下文。但是，我不明白如何使用代码获得图像中显示的结果：如何获得两个子节点

\u 40

和

\u 65

？他们以前在那里？嗨，我复制了这个解决方案，但它仍然创建了

\u 40

和

\u 65

子节点。不知道为什么会这样。这可能是因为它没有返回正确的数据开始吗？你能用控制台记录下载URL的值吗？你得到了什么？另请参阅答案的更新，这是对用于创建用户记录的代码的修改。仅供参考，我刚刚尝试了答案中的所有代码，它工作正常。特别是没有

\u 40

和

\u 65

子节点，而是正确的下载URL！记录URL显示了正确的URL，但仍然没有将正确的值写入数据库。如您所示，在更新了我的代码的另一部分之后，它解决了问题。很抱歉回复太晚，感谢您提高了我的代码质量并解决了我的问题！