안녕하십니까, 알. 이것은 첫 번째 블로그가 될 것입니다. 우리 시작합시다.
나는react 웹 응용 프로그램에서 Firebase 저장소를 실현할 것이다. 그러나 이 개념은 모든 기술에서 똑같다. 이는 vanillajavascript,Vue를 포함한다.Js, AngularJs, 우리 옛 jQuery 등등.

Firebase 스토리지 소개

According to official docs of firebase:

Cloud Storage for Firebase lets you upload and share user generated content, such as images and video, which allows you to build rich media content into your apps. Your data is stored in a Google Cloud Storage bucket — an exabyte scale object storage solution with high availability and global redundancy.

간단히 말하면:
만약 파일을 웹 응용 프로그램에 업로드하거나 이미지를 업로드하고 싶다면, 파일이나 이미지를Firebase의 클라우드 저장소에 업로드한 다음, 이미지 파일을 업로드하는 URL을 수집하여 데이터베이스에 넣는 방법이 있다.

우리가 보유한 사용자 인터페이스:

최종 코드

다음은 저희가 본 블로그 말미에 완성할 최종 코드입니다.나는 반드시 너에게 매 줄의 코드를 설명할 것이다

//~~~ Logic for File Upload ~~~
import {
  uploadBytesResumable,
  getDownloadURL,
  ref,
  deleteObject,
} from "@firebase/storage";
import { storage } from "../Firebase";

function uploadTaskPromise(file) {
    return new Promise(function (resolve, reject) {
      if (!file) return;

      const storageRef = ref(storage, `img/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          );
          console.log(prog);
        },
        (error) => {
          console.log("ERRRRR!!!!!!");
          alert("Error inside upload file function", error);
          reject();
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log("File available at", downloadURL);
            resolve(downloadURL);
          });
        }
      );
    });
  }

//~~~ Logic for Post request to backend ~~~

const postSubmitHandler = async (e) => {
    e.preventDefault();

    try {
      storageURL = await uploadTaskPromise(file);
      console.log("PROmisE REsOLVEd ANd got the urL AS", storageURL);

      const response = await fetch("http://localhost:5000/api/posts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
        body: JSON.stringify({
          location,
          description,
          price,
          contact,
          breed,
          creatorId: currentUser.id,
          image: storageURL,
        }),
      });
      console.log("REQUEST SENT");

    } catch (err) {
      const deleteImgRef = ref(storage, `img/${file.name}`);
      deleteObject(deleteImgRef)
        .then(() => {
          console.log("Something Went wrong, Image deleted successfully");
        })
        .catch((error) => {
          console.log("an error occured while deleting image", error);
        });
    }
  };

Firebase 구성 파일 만들기

npm과 모듈 바인더(예를 들어 웹팩이나 Rollup)를 사용하고 있다면 다음 명령을 실행하여 최신 SDK를 설치할 수 있습니다.npm install firebase그런 다음 Firebase를 초기화하고 웹 응용 프로그램에 SDK를 사용합니다.예를 들어 스토리지 SDK만 사용할 것입니다.
다음 단계로 넘어가기 전에 Firebase에서 프로젝트를 만들었다고 생각합니다.
Firebase를 초기화하려면 먼저 새 파일을 만들고 이름을 firebase.js로 지정합니다.다음 코드를 복사해서 Firebase에 붙여넣습니다.방금 만든 js 파일입니다.

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  //PASTE YOUR FIREBASE CONFIG HERE
};

const app = initializeApp(firebaseConfig);

const storage = getStorage(app);

export { storage, app };

이제 Firebase 프로젝트의 왼쪽 메뉴에 있는 톱니바퀴 아이콘을 누르고 프로젝트 설정에 들어갑니다.그리고 아래로 스크롤해서 FirebaseConfig 상수의 내용을 복사하고 Firebase에서 만든 FirebaseConfig 상수에 붙여넣습니다.js 파일.
이제 Firebase storage SDK는 애플리케이션에서 언제 어디서나 사용할 수 있습니다.

파일 업로드 기능 만들기

이제 게시물을 작성한 파일로 이동합니다.

import { uploadBytesResumable, ref} from "@firebase/storage";
import { storage } from "../Firebase";

function uploadTaskPromise(file) {
      if (!file) return;

      const storageRef = ref(storage, `img/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);
}

필요한 의존항을 가져옵니다.
새 함수를 만들고 uploadTaskPromise 라고 명명하면 파일을 매개 변수로 받아들인다.
현재, 파일을 업로드하거나 다운로드하거나, 파일을 삭제하거나, 메타데이터를 가져오거나 업데이트하기 위해서, 실행할 파일에 대한 인용을 만들어야 합니다.인용을 구름 파일을 가리키는 바늘로 볼 수 있습니다.인용은 경량급이기 때문에 필요에 따라 임의의 인용을 만들 수 있고 여러 작업에 사용할 수 있습니다.
인용을 만들면 인용과 업로드할 파일을 매개 변수로 uploadBytesResumable 전달하여 uploadTask를 만듭니다.

파일 업로드

import {
  uploadBytesResumable,
  getDownloadURL,
  ref,
  deleteObject,
} from "@firebase/storage";
import { storage } from "../Firebase";

function uploadTaskPromise(file) {
    return new Promise(function (resolve, reject) {
      if (!file) return;

      const storageRef = ref(storage, `img/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          );
          console.log(prog);
        },
        (error) => {
          console.log("ERRRRR!!!!!!");
          alert("Error inside upload file function", error);
          reject();
        },
        () => {  getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log("File available at", downloadURL);
            resolve(downloadURL);
          });
        }
      );
    });
  }

일단 uploadTask가 준비되면, 파일을 클라우드 저장소에 업로드하는 실제 논리에 들어갈 수 있습니다.
uploadTask에는 세 명의 관찰자를 등록할 수 있는 .on 방법이 있다.

"state changed"관찰자, 상태가 바뀔 때 수시로 호출

오류 관찰자, 고장 시 호출

완공 관찰원, 완공 성공 요구

1. 첫 번째 관찰자는 상태 변화 사건, 예를 들어 진전, 정지와 회복을 관찰한다.업로드된 바이트 수와 업로드할 바이트 총수를 포함한 작업 진도를 얻을 수 있습니다. 이 데이터를 통해 업로드된 총 비율을 실시간으로 얻을 수 있습니다.
2. 두 번째 관찰자는 성공하지 못한 업로드를 처리한다.이 모듈에서는 파일을 업로드할 때 발생할 수 있는 모든 오류를 처리할 수 있습니다.
3. 세 번째 관찰자와 가장 중요한 관찰자가 처리한 성공 업로드.우리는 파일의 URL을 데이터베이스에 저장하는 것이지 전체 파일을 데이터베이스에 저장하는 것이 아니라 업로드한 파일의 URL을 추출할 수 있다.
현재, 파일을 클라우드 저장소에 업로드하는 것은 비동기적인 작업이기 때문에, 우리는 전체 과정을 약속에 포장할 것이다.우리는 새로운 약속을 되돌려줍니다. error block 또는 second observer 에 도착하면 거부하고 업로드가 성공적으로 끝난 후에 업로드된 파일 URL과 분석할 것입니다.

게시물 로직 업로드

일단 우리가 파일을 클라우드 저장소에 업로드하는 논리를 갖추면, 우리는 지금 백엔드에post 요청을 보내서 URL을 데이터베이스에 저장할 수 있다.
Post SubmitHandler라는 새 함수를 만들었습니다. Post 단추를 눌렀을 때마다 터치됩니다.우리는 이 함수를 비동기 함수로 성명할 것이다. 왜냐하면 데이터를 데이터베이스에 저장하고 파일을 메모리에 업로드하는 것은 모두 비동기 작업이기 때문이다.
우선 가장 중요한 것은 무엇을 해야 하는가e.preventDefault()입니다. 그렇지 않으면 포스트 버튼을 누르면 페이지가 새로 고쳐지고 코드가 폭발합니다.
다음 단계에서 우리가 해야 할 일은 우리의 전체 논리를 하나의 Try Catch 블록에 포장하여 예방 조치를 강화하는 것이다.
현재 Try 블록에서 우리는 uploadTaskPromise를 호출하여 업로드해야 할 파일을 매개 변수로 전달합니다.wait 키워드를 입력하는 것을 잊지 마세요.현재 업로드 작업이 성공하면 저희가 저장한 파일 URL을 통해 해결될 것을 약속하고 이 URL을 상수storageUrl에 저장합니다.업로드에 실패하면 약속을 거절하고,catch 블록에 버려져서, 거기에서 오류를 처리할 수 있습니다.
현재 URL이 생겼습니다. 우리가 해야 할 일은 백엔드에POST 요청을 보내는 것입니다.
마지막으로 우리가 파일을 클라우드 저장소에 성공적으로 저장했지만 데이터베이스에 저장하지 못하면 어떤 상황이 발생할지 고려해야 한다.우리는 여전히catch 블록에 버려지지만, 다운로드한 파일은 클라우드 저장소에 저장되며, 저장 공간을 낭비하는 것 외에는 아무것도 하지 않습니다.
이 문제를 처리하기 위해서, 우리는 반드시 저장에 저장된 파일을 삭제해야 한다. 방법은 삭제해야 하는 파일에 대한 인용을 생성하는 것이다. 예를 들어 파일을 저장에 업로드할 때 생성된 인용과 유사하다.
인용이 생기면 deleteObject 에서 @firebase/storage 인용을 가져와 전달할 수 있습니다.
데이터베이스에 데이터를 저장할 때 문제가 발생하면 메모리에 저장된 파일을 삭제합니다.

시간 내주셔서 감사합니다.
나중에 Firebase 저장소를 사용할 때 참고할 수 있도록 게시물을 저장합니다.