如何从 firebase 存储上传图像到我的 React 应用程序？

Question

我正在尝试制作一个社交媒体应用程序。我想添加上传图片的功能，但我不知道如何在我的 firebase 存储中获取这些图片并将它们全部显示为我的应用程序中的 post。

这是我的 firebase.js 文件

    import firebase from "firebase/app";
    import "firebase/storage";

const firebaseConfig = {
    apiKey: "AIzaSyCbiHH-zpob5AytooHMxrB_oncIz5wAcgg",
    authDomain: "expresate-react.firebaseapp.com",
    databaseURL: "https://expresate-react-default-rtdb.firebaseio.com",
    projectId: "expresate-react",
    storageBucket: "expresate-react.appspot.com",
    messagingSenderId: "400618187775",
    appId: "1:400618187775:web:d78270044e4b1d464215ca"
  };
firebase.initializeApp(firebaseConfig);

const storage = firebase.storage();

export { storage, firebase as default };

这是将图像上传到 firebase 存储的函数。

const image = this.state.selectedFile;

    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
        "state_changed",
        snapshot => {},
        error => {
            console.log(error);
        },
        () => {
            storage
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then(url => {
              this.setState({url: url, selectedFile: null});
            });
        }
    );

上传功能运行良好我可以看到 firebase 存储中的文件。现在，如何获取它们并将它们显示在我的应用程序上？

谢谢

Answer 1

您已经用 getDownloadURL 获得了 url。它是 url 和 this 一样。

您可以使用它来显示您的图像。只需将 url 放入 img 中，如下所示：


<img src={url} />

如何从 firebase 存储上传图像到我的 React 应用程序？

How to upload images on my React app from firebase storage?

firebase

reactjs

firebase-storage