firebase에서 storage에 이미지 업로드하는 방법

1.import 파일들

이미지 업로드를 위해서 firebase/storage 에서 import를 해주어야 한다.

import getStorage, ref, uploadBytes, listAll, getDownloadURL,} from "firebase/storage";
import firebaseApp from "../../Firebase";

const storage = getStorage(firebaseApp);

import firebaseApp from "../../Firebase";의 경우는 firebase.js 파일에서 가져온 firebase 파일이다.

2. 업로드를 위한 state제작

const [imageUpload, setImageUpload] = useState(null);
const [imageList, setImageList] = useState([]);

파일 업로드 시 업로드한 파일을 담아둘 imageUpload state
업로드 된 파일을 불러올 imageList state

3. 이미지 업로드 함수

const upload = () => {
    if (imageUpload === null) return;

    const imageRef = ref(storage, `images/${imageUpload.name}`);
    // `images === 참조값이름(폴더이름), / 뒤에는 파일이름 어떻게 지을지
    uploadBytes(imageRef, imageUpload).then((snapshot) => {
      // 업로드 되자마자 뜨게 만들기
      getDownloadURL(snapshot.ref).then((url) => {
        setImageList((prev) => [...prev, url]);
      });
      // 
    });
  };

이미지가 업로드되지 않았으면 return해준다.

const imageRef는 참조값(스토리지의 폴더명)을 만들고
ref(스토리지폴더명, 파일이름양식)으로 하여 참조값과 이미지를 업로드해서 담아둔다.

uploadBytes를 이용해서 파일을 업로드 하자마자 올라가게 만들어 준다.
getDownloadURL를 이용해서 다운로드한 이미지를 setImageList로 올려준다.

4. 이미지 불러오기

 useEffect(() => {
    listAll(imageListRef).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageList((prev) => [...prev, url]);
        });
      });
    });
  }, []);

listAll메서드를 이용해서 이미지 리스트를 불러온다.

5. HTML 구현

<input
        type="file"
        onChange={(event) => {
          setImageUpload(event.target.files[0]);
        }}
      />
      <button onClick={upload}>업로드</button>
      {imageList.map((el) => {
        return <img key={el} src={el} />;
      })}

6. 전체코드

import firebaseApp from "../../Firebase";
import React, { useState, useEffect } from "react";
import getStorage, ref, uploadBytes, listAll, getDownloadURL,} from "firebase/storage";

function FireBaseExample(props) {
  const [imageUpload, setImageUpload] = useState(null);
  const [imageList, setImageList] = useState([]);

  const storage = getStorage(firebaseApp);
  const imageListRef = ref(storage, "images/");

  const upload = () => {
    if (imageUpload === null) return;

    const imageRef = ref(storage, `images/${imageUpload.name}`);
    uploadBytes(imageRef, imageUpload).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        setImageList((prev) => [...prev, url]);
      });
    });
  };
  useEffect(() => {
    listAll(imageListRef).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageList((prev) => [...prev, url]);
        });
      });
    });
  }, []);
  
   return (
    <div>
      <input
        type="file"
        onChange={(event) => {
          setImageUpload(event.target.files[0]);
        }}
      />
      <button onClick={upload}>업로드</button>
      {imageList.map((el) => {
        return <img key={el} src={el} />;
      })}
    </div>
  );
}
export default FireBaseExample;