如何從我上傳的檔案中獲取鏈接到firebase以傳遞給img元素？

我正在嘗試上傳然后在頁面上顯示影像。我怎么做？我目前收到以下錯誤：Uncaught (in promise) TypeError: firebase__WEBPACK_IMPORTED_MODULE_2 _.storage.ref is not a function at Observer.next。

此外，默認影像不會改變。我確實設法 console.log 影像鏈接，但我不能將它分配給變數。

順便說一句，影像被上傳到 firebase 服務器。

import React, { useState, useEffect } from "react";
import { Paper } from "@mui/material";
import authHeader from "../../features/authentication/AuthHeader";
import { storage } from "./firebase";
import { getDownloadURL, uploadBytesResumable, ref } from "firebase/storage";

function UserProfile() {
  const [user, setUser] = useState({});
  const [Url, setUrl] = useState('');

  async function fetchUser() {
    const response = await fetch("http://localhost:9005/getProfile", {
      headers: authHeader(),
    });
    const fetchedUser = await response.json();
    console.log(fetchedUser);
    setUser(fetchedUser);
  }

  useEffect(() => {
    fetchUser();
  }, []);

  //firebase upload below this

  const [progress, setProgress] = useState(0);

  const handleFireBaseUpload = (e) => {
    e.preventDefault();
    const image = e.target[0].files[0];
    console.log("uploading pic");
    console.log(image);
    uploadImage(image);
  };

  const uploadImage = (image) => {
    if (!image) {
      alert(`image format not supported${typeof image}`);
      return;
    }
    const storageRef = ref(storage, `/images/${image.name}`);
    const uploadTask = uploadBytesResumable(storageRef, image);

    uploadTask.on( "state_changed", (snapshot) => {
        const prog = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(prog);
        storage.ref('images').child(image.name).getDownloadURL()
        .then((url)=>{
          setUrl(url);
        });
      },
      (err) => console.log(err),
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((url) => console.log(url));
      }
      
    );
  };

  return (
    <>
      <paper elevation={6}>
      <h3>Upload Progress ${progress} %</h3>

        <div className="pfp">
          <form onSubmit={handleFireBaseUpload}>
            <input type="file" />
            <p>hgk</p>
            <button>Upload</button>
          </form>
          <img src={'https://th.bing.com/th/id/OIP.j3uYsrDvDgb3iLXvx1kcDgHaGh?pid=ImgDet&rs=1'} alt="Profile Picture" />
        </div>
      </paper>

      <Paper
        elevation={6}
        style={{ margin: "10px", padding: "15px", textAlign: "left" }}
        key={user.user_id}
      >
        First Name: {user.firstName}
        <br />
        Last Name: {user.lastName}
        <br />
        Email: {user.email}
        <br />
        Phone: {user.phone}
      </Paper>
    </>
  );
}
export { UserProfile as default };

uj5u.com熱心網友回復：

您應該在影像上傳后更新 URL。也是storage.ref('images')名稱空間語法。新的 V9 SDK 有一個功能語法，您可以使用它來獲取下面的下載 URL。嘗試重構代碼，如下所示：

uploadTask.on("state_changed", (snapshot) => {
    const prog = Math.round(
      (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    );
    setProgress(prog); 
    // Don't fetch downloadURL here, just track progress
  },
  (err) => console.log(err),
  () => {
    // Get download URL here
    getDownloadURL(uploadTask.snapshot.ref).then((url) => {
      setUrl(url);
      console.log(url)
    })
  }
);

標籤：javascript 反应 火力基地 firebase-存储

上一篇：我的應用程式無需將資料更新到資料庫即可回傳上一頁。（使用Android作業室 Firebase）

下一篇：Flutter是否有任何可能的方法讓用戶在打開應用程式時具有在線狀態