우리가 자신의 맞춤형 react 갈고리를 구축하기 전에, 기본적인 내장 react 갈고리를 잘 이해해야 한다는 것을 알려 드리겠습니다.만약 네가 기본 지식에 익숙하지 않다면, 너는 여기서부터 시작해서 여기로 돌아갈 수 있다.

시작합시다.

사용자 정의 갈고리를 만들기 위해서는 다음과 같은 몇 가지를 기억해야 한다...모든 규칙 읽기Here.

이제 우리는 기본 지식을 소개하고 사용자 정의 연결을 구축할 준비를 하고 있다.

Firebase 저장소에 파일을 도구로 업로드하고 업로드 진도를 되돌리며 마지막으로 공공 URL을 되돌려줍니다. 데이터베이스에 저장하거나 img src로 사용할 수 있습니다.

React 항목 만들기

프로젝트 디렉터리에react 프로젝트와 cd 만들기

npx create-react-app <your app name here>
cd <your app name here>

그리고react 프로그램을 시작합니다

npm run start

이제 다음과 같은 템플릿 React 항목이 있어야 합니다.

UI 정리 및 구축 시작

정리된 파일 구조는 다음과 같다.

모든 템플릿 코드를 정리하고 App.js와add 방법handleChange에 입력 형식이 파일인 폼을 추가하여 사용자가 파일을 선택할 때 이벤트를 처리합니다.App.js 이 내용을 추가한 후...

import React, { useState } from "react";
import "./App.css";

function App() {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);

    const types = ["image/png", "image/jpeg", "image/jpg"];

    const handleChange = (e) => {
        let selectedFile = e.target.files[0];

        if (selectedFile) {
            if (types.includes(selectedFile.type)) {
                setError(null);
                setFile(selectedFile);
            } else {
                setFile(null);
                setError("Please select an image file (png or jpg)");
            }
        }
    };

    return (
        <div className="App">
            <form>
                <label>
                    <input type="file" onChange={handleChange} />
                    <span>Upload Image</span>
                </label>
            </form>
        </div>
    );
}

export default App;

이미지 파일만 받아들이는 필터를 추가하고 useState 갈고리를 사용하여 file 상태에서 선택한 파일과 error 상태에서 선택한 모든 오류를 저장합니다.
지금 당신의 응용 프로그램은 이렇을 것입니다...

Firebase 항목 만들기

Firebase Console로 이동하여 구글 계정으로 로그인한 다음 항목 추가 를 누르십시오

그리고 당신의 항목을 명명하고 계속하세요

구글 분석 및 프로젝트 만들기 비활성화

Firebase에 응용 프로그램 등록

Firebase에 응용 프로그램을 추가합니다.

응용 프로그램에 이름을 붙이고 등록합니다.Firebase는 다음 객체처럼 보이는 응용 프로그램의 자격 증명을 제공합니다.

var firebaseConfig = {
    apiKey: "AIzaSyDo5UUe86THOjczUAhytr7yu67FlLVmpj2E",
    authDomain: "new-project.firebaseapp.com",
    databaseURL: "https://new-project.firebaseio.com",
    projectId: "new-project",
    storageBucket: "new-project.appspot.com",
    messagingSenderId: "509872254322",
    appId: "1:509872254322:web:d63d977d86c734nu829e12f"
  };

Firebase가 제공하는 대상을 복사하고 프로젝트 디렉터리로 이동합니다.

응용 프로그램을 Firebase에 연결하기

firebase 폴더에 새 폴더 이름 src 을 만듭니다.config.js 폴더에 파일firebase을 만들고 firebaseConfig 객체를 파일에 붙여넣습니다.
현재 firebasenpm 패키지를 설치합니다.루트 디렉토리에서 다음 명령을 실행합니다.

npm i firebase

현재 config.js 파일의 Firebase 패키지를 가져오고 내보내기 storage 방법으로 Firebase를 초기화합니다.

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

const firebaseConfig = {
    apiKey: "AIzaSyDo5UUe86THOjczUAhytr7yu67FlLVmpj2E",
    authDomain: "new-project.firebaseapp.com",
    databaseURL: "https://new-project.firebaseio.com",
    projectId: "new-project",
    storageBucket: "new-project.appspot.com",
    messagingSenderId: "509872254322",
    appId: "1:509872254322:web:d63d977d86c734nu829e12f"
 };

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const projectStorage = firebase.storage();

export { projectStorage };

Firebase 콘솔에 스토리지 설정

왼쪽 열에서 Storage 링크를 클릭한 다음 Get Started 를 클릭합니다.

그런 다음 다음 다음 을 클릭하고 다음 단계에서 완료합니다.
이제 Firebase 스토리지 rules 및 read 에서 누구나 변경할 수 있도록 해야 합니다.
이렇게 하려면 규칙 탭으로 이동합니다.

그런 다음 현재 규칙을 삭제하고 규칙 편집기에 다음 규칙을 붙여넣습니다.그리고 write 당신의 새로운 규칙을 확보하세요.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

이제 응용 프로그램의 이미지를 Firebase에 업로드하려고 합니다.

마지막으로 사용자 정의 연결을 만듭니다

Publish 폴더 이름 src 내에 새 폴더를 만듭니다.그리고 hooks 폴더에 새 파일 useStorage.js 을 만듭니다.이것은 Firebase 저장소에 이미지를 업로드하는 사용자 정의 연결입니다.
최종 폴더 구조는 다음과 같습니다.

우리는 사용자 정의 연결에서 두 개의 기본 연결고리 hooks 와 useState 를 사용할 것이다.

파일을 초기화하고 내보내려면 useEffect 파일을 만들어야 합니다.

그리고 이 인용에 reference to the Firebase storage 방법으로 이미지를 업로드합니다.

config.js 메서드는 상태가 변경될 때마다 제공됩니다put().이 스냅샷을 사용하여 업로드 진행률을 백분율로 추적할 수 있습니다.

마지막으로 업로드된 이미지에서 공통 URL을 가져옵니다.

따라서 put() 파일에 다음 코드를 추가합니다.

import { useState, useEffect } from "react";

import { projectStorage } from "../firebase/config";

export const useStorage = (file) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);

    // runs every time the file value changes
    useEffect(() => {
        if (file) {
            // storage ref
            const storageRef = projectStorage.ref(file.name);

            storageRef.put(file).on(
                "state_changed",
                (snap) => {
                    // track the upload progress
                    let percentage =
                        Math.round(
                        (snap.bytesTransferred / snap.totalBytes) * 100
                    );
                    setProgress(percentage);
                },
                (err) => {
                    setError(err);
                },
                async () => {
                    // get the public download img url
                    const downloadUrl = await storageRef.getDownloadURL();

                    // save the url to local state
                    setUrl(downloadUrl);
                }
            );
        }
    }, [file]);

    return { progress, url, error };
};

우리는 snap 갈고리에 모든 논리를 추가하고 의존항으로 useStorage.js 을 추가했다.따라서 파일이 바뀔 때마다 갈고리가 다시 실행됩니다.
마지막으로 우리 수출useEffect,file과progress.

연결고리를 우리 구성 요소에 집적

이제 구성 요소에서 갈고리 url 를 가져와 선택한 파일에 사용할 수 있습니다.
우리도 진전을 보여줄 수 있다.error와 연결된 통합된 useStorage 파일입니다.

import React, { useState } from "react";
import "./App.css";

import { useStorage } from "./hooks/useStorage";

function App() {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);

    const types = ["image/png", "image/jpeg", "image/jpg"];

    const handleChange = (e) => {
        let selectedFile = e.target.files[0];

        if (selectedFile) {
            if (types.includes(selectedFile.type)) {
                setError(null);
                setFile(selectedFile);
            } else {
                setFile(null);
                setError("Please select an image file (png or jpg)");
            }
        }
    };

    // Getting the progress and url from the hook
    const { progress, url } = useStorage(file);

    return (
        <div className="App">
            <form>
                <label>
                    <input type="file" onChange={handleChange} />
                    <span>Upload Image</span>
                </label>
            </form>

            {error && <p>{error}</p>}
        </div>
    );
}

export default App;

이제 파일 App.js 및 useStorage 에 액세스할 수 있습니다.따라서 사용자에게 피드백을 주고 업로드가 끝날 때 progress 로 이미지를 표시할 수 있습니다.
잘못된 단락 태그를 표시한 루트url에 추가합니다.
현재, 우리 프로그램도 진도와 그림을 표시할 것입니다.

{file && <p>{progress}% uploaded</p>}
{url && (
          <p>
             <b>File url: </b>
             <a href={url}>{url}</a>
          </p>
)}
{url && <img src={url}></img>}

우리 url 지금...

import React, { useState } from "react";
import "./App.css";

import { useStorage } from "./hooks/useStorage";

function App() {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);

    const types = ["image/png", "image/jpeg", "image/jpg"];

    const handleChange = (e) => {
        let selectedFile = e.target.files[0];

        if (selectedFile) {
            if (types.includes(selectedFile.type)) {
                setError(null);
                setFile(selectedFile);
            } else {
                setFile(null);
                setError("Please select an image file (png or jpg)");
            }
        }
    };

    // Getting the progress and url from the hook
    const { progress, url } = useStorage(file);

    return (
        <div className="App">
            <form>
                <label>
                    <input type="file" onChange={handleChange} />
                    <span>Upload Image</span>
                </label>
            </form>

            {error && <p>{error}</p>}
            {file && <p>{progress}% uploaded</p>}
            {url && (
                <p>
                    <b>File url: </b>
                    <a href={url}>{url}</a>
                </p>
            )}
            {url && <img src={url}></img>}
        </div>
    );
}

export default App;

이제 사용자 정의 연결을 성공적으로 만들었습니다.

구성 요소에 통합합니다.

및 업로드가 완료되면 진행 상태 및 이미지가 표시됩니다.

필요한 경우 URL을 데이터베이스에 저장할 수도 있습니다.

당신은 온라인으로 응용 프로그램Here을 볼 수 있습니다.가보세요.
또한 내 Github Repo 에서 전체 html 를 볼 수 있습니다.코드를 사용하기 전에 div 를 App.js 로 교체해야 합니다.그렇지 않으면 그것은 작용하지 않을 것이다.
네가 나의 Github에 있을 때, 환매하는 것을 잊지 마라. 그리고 follow me in Github