Firebase ist eine Mobil- und Webanwendung Entwicklungsplattform von Google erstellt das Produkte und Lösungen bereitstellt, auf die Sie sich für Ihre App-Entwicklungsanforderungen verlassen können, einschließlich Cloud Firestore, Cloud-Funktionen, Authentifizierung, Hosting, Echtzeitdatenbank, Cloud-Speicher und mehr.










Der Cloud-Speicherdienst wurde für Entwickler entwickelt, um benutzergenerierte Inhalte wie Fotos und Videos, die in Google Cloud Storage-Buckets gespeichert sind, einfach zu speichern und bereitzustellen. Darüber hinaus lässt sich Firebase Cloud Storage in andere Firebase-Dienste wie Firebase Authentication integrieren, sodass Benutzer hochgeladene Dateien organisieren und bei Bedarf Zugriffskontrollen anwenden können.






you are watching: Laden Sie Dateien mit React in Firebase Cloud Storage in Firebase v9 hoch

In diesem Artikel erfahren Sie, wie Sie eine Datei in Firebase Cloud Storage hochladen und mit Firebase v9.x, der neuesten Version zum Zeitpunkt des Schreibens, auf die URL der hochgeladenen Datei zugreifen. Um diesem Artikel zu folgen, benötigen Sie:

  • npm und Node.js installiert
  • Kenntnisse von React und React Hooks
  • Ein Google-Konto für den Zugriff auf die Firebase Console

Lass uns anfangen!

Inhaltsverzeichnis

Erstellen Sie ein Projekt auf Firebase

Rufen Sie die Firebase-Konsole unter auf https://console.firebase.google.com/. Sie sehen die Startseite:

Homepage der Firebase-Konsole

Klicken Sie auf die Erstellen Sie ein Projekt Taste. Geben Sie den Namen Ihres Projekts ein. Ich nenne meine React-Firebase-storage. Akzeptieren Sie die Firebase-Nutzungsbedingungen und klicken Sie auf Fortsetzen:

Erstellen Sie Project React Firebase-Speicher

Wenn Sie Google Analytics in Ihrem Projekt verwenden möchten, verlassen Sie die Aktivieren Sie Google Analytics Umschalten. Ich brauche es für diese Demo nicht, also werde ich es ausschalten. Klicke auf Projekt erstellen und warten Sie, bis das Projekt erstellt wurde:

Google Analytics Firebase-Projekt

Klicke auf Fortsetzen weiter zur Konsole:

Fahren Sie mit Console React Firebase Storage fort

In der nächsten Benutzeroberfläche wählen wir die Plattform aus, die wir zum Erstellen der gerade erstellten Anwendung verwenden möchten. In diesem Fall wird es im Web sein, also wählen wir Netz:

Erstellen Sie eine Webplattform-Firebase-Reaktion

Als nächstes geben wir einen Namen ein, um die App zu registrieren. Da ich die App nicht auf Firebase hosten werde, überspringe ich das und klicke auf App registrieren:

Registrieren Sie die Firebase-Web-App

see more : Snapchat introduces the new Shared Stories feature, here’s how to use it

Als Nächstes initialisieren wir eine neue React-App und fügen Firebase mit den bereitgestellten Anmeldeinformationen zum Projekt hinzu:

Initialisieren Sie die Firebase React-App

Erstellen Sie eine neue React-App

Erstellen Sie eine neue React-App mit dem folgenden Befehl:

npx create-react-app app-name

Als nächstes installieren Sie Firebase wie folgt:

npm install firebase

Erstellen Sie eine neue Datei in der src Ordner aufgerufen firebase.js. Kopieren Sie den Konfigurationscode aus der Erstellung eines Firebase-Projekts und fügen Sie ihn in die firebase.js Datei.

Initialisieren Sie die Firebase-App mit dem Konfigurationsobjekt, das die Anmeldeinformationen enthält, und exportieren Sie es. Sie exportieren auch einen Verweis auf den Speicherdienst, der zum Erstellen von Verweisen in Ihrem Speicher verwendet wird:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "************************************",
    authDomain: "react-firebase-storage-ae047.firebaseapp.com",
    projectId: "react-firebase-storage-ae047",
    storageBucket: "react-firebase-storage-ae047.appspot.com",
    messagingSenderId: "1071019670975",
    appId: "1:1071019670975:web:74cc537cd214fb923a750a"
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);

In App.jserstellen wir ein Formular zum Hochladen von Dateien und eine Schaltfläche zum Senden:

import './App.css';
function App() {
  return (
    <div className="App">
      <form className="form">
        <input type="file" />
        <button type="submit">Upload</button>
      </form>
    </div>
  );
}
export default App;

Upload-Schaltfläche Senden erstellen

Erstellen Sie einen Cloud Storage-Bucket

Um einen der Firebase-Dienste in Ihrer App zu verwenden, müssen Sie sie für dieses bestimmte Projekt in der Firebase Console einrichten. Daher weiß Firebase, dass diese App dieses Produkt verwendet.

Nachdem Sie den Konfigurationscode in die Firebase-Konsole kopiert haben, klicken Sie auf Gehen Sie zur Konsole. Uns wird eine Benutzeroberfläche gezeigt, die alle Produkte auflistet, die wir verwenden könnten. Klicken Sie in der linken Menüleiste auf Lager:

Cloud Storage-Bucket erstellen

Klicke auf Loslegen:

Firebase Storage Erste Schritte

Für den Zweck dieser Demo werden wir auswählen Testmodus. Aber für Produktionsanwendungen sollten Sie wählen Produktionsmodus um einzuschränken, wer im Speicher lesen und schreiben kann. Klicken Nächste:

Firebase-Testmodus Produktionsmodus

Auswählen Cloud-Speicherort und klicken Getan:

see more : Wondershare startet Werbekampagne, um aktualisierte Videobearbeitungssoftware zu feiern

Cloud-Speicherort

Jetzt können wir Dateien programmgesteuert in den Cloud Storage-Bucket hochladen und diese Dateien auch lesen:

Lesen Sie Datei hochladen Firebase Cloud Storage

Dateien programmgesteuert hochladen und lesen

Damit ist alles vorbereitet, damit wir den Code zum Hochladen von Dateien schreiben können. In App.jsimportieren wir zunächst den Speicher, den wir aus der Firebase-Konfigurationsdatei exportiert haben, die Methoden, die wir verwenden werden firebase/storageund die Reaktion useState Haken:

import { useState } from "react";
import { storage } from './firebase';
import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";

Lassen Sie uns eine Funktion schreiben, die ausgeführt wird, wenn ein Benutzer auf klickt einreichen Taste:

const [imgUrl, setImgUrl] = useState(null);
const [progresspercent, setProgresspercent] = useState(0);

const handleSubmit = (e) => {
    e.preventDefault()
    const file = e.target[0]?.files[0]

    if (!file) return;

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

    uploadTask.on("state_changed",
      (snapshot) => {
        const progress =
          Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        setProgresspercent(progress);
      },
      (error) => {
        alert(error);
      },
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          setImgUrl(downloadURL)
        });
      }
    );
  }

Lassen Sie uns aufschlüsseln, was in der passiert handleSubmit Funktion. Wir haben zwei Zustände für die Bild-URL initialisiert, nachdem wir die hochgeladene Datei und den Fortschrittswert gelesen haben, während das Bild hochgeladen wird.

const file = e.target[0]?.files[0] eine Variable erstellt und die mitgelieferte Datei darin gespeichert.

Als Nächstes haben wir einen Verweis auf die Datei erstellt, die wir bearbeiten möchten, indem wir die aufrufen ref() auf der Instanz des Speicherdienstes, die wir bereits in der Konfigurationsdatei erstellt haben. Als zweiten Parameter haben wir einen Pfad übergeben, auf den die Referenz zeigen soll, was optional ist.

Sobald die Referenz erstellt wurde, können wir eine Datei hochladen, indem wir die aufrufen uploadBytesResumable(). Es nimmt die Referenz, die wir zuvor erstellt haben, und dann die Datei, die in den Cloud-Speicher hochgeladen werden soll. Beachten Sie, dass uploadBytes() macht genau dasselbe, also kann beides verwendet werden.

Allerdings mit uploadBytesResumable(), kann der Upload angehalten und fortgesetzt werden und zeigt Fortschrittsaktualisierungen an. Wir verwenden es hier, weil wir den Fortschritt des Uploads anzeigen möchten, während er läuft. Wenn Sie diese Funktionalität nicht möchten, können Sie sie gerne verwenden uploadBytes().

Als nächstes nennen wir die on() -Methode auf dem vom Aufruf zurückgegebenen Promise uploadBytesResumable() um auf Zustandsänderungen, Fehler und erfolgreiche Uploads zu lauschen. Diese drei Callback-Funktionen werden in verschiedenen Phasen des Datei-Uploads ausgeführt. Die erste wird während des Uploads ausgeführt, um Statusänderungsereignisse wie Fortschritt, Pause und Fortsetzen zu beobachten, während die nächste ausgelöst wird, wenn ein Upload nicht erfolgreich ist. Schließlich wird der letzte ausgeführt, wenn der Upload erfolgreich abgeschlossen ist.

Bei erfolgreichem Upload rufen wir die auf getDownloadURL() um die Download-URL der Datei zu erhalten, die in der App angezeigt werden soll. Wir aktualisieren dann den Status mit der neu heruntergeladenen Bild-URL.

Der vollständige Code zum Anzeigen des Bildes und des Fortschrittsbalkens ist unten dargestellt:

import './App.css';
import { useState } from "react";
import { storage } from './firebase';
import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";

function App() {
  const [imgUrl, setImgUrl] = useState(null);
  const [progresspercent, setProgresspercent] = useState(0);

  const handleSubmit = (e) => {
    e.preventDefault()
    const file = e.target[0]?.files[0]
    if (!file) return;
    const storageRef = ref(storage, `files/${file.name}`);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on("state_changed",
      (snapshot) => {
        const progress =
          Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        setProgresspercent(progress);
      },
      (error) => {
        alert(error);
      },
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          setImgUrl(downloadURL)
        });
      }
    );
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit} className="form">
        <input type="file" />
        <button type="submit">Upload</button>
      </form>
      {
        !imgUrl &&
        <div className="outerbar">
          <div className="innerbar" style={{ width: `${progresspercent}%` }}>{progresspercent}%</div>
        </div>
      }
      {
        imgUrl &&
        <img src={imgUrl} alt="uploaded file" height={200} />
      }
    </div>
  );
}
export default App;

Fazit

Firebase Cloud-Speicher ist sehr einfach zu verwenden, um verschiedene Medientypen zu speichern. Darüber hinaus skaliert es automatisch, sodass Sie sich keine Sorgen machen müssen, zu einem anderen Anbieter zu wechseln, wenn Ihre Daten zu groß werden.

Danke fürs Lesen. Ich hoffe, Sie fanden dieses Tutorial in irgendeiner Weise hilfreich. Fühlen Sie sich frei, Fragen in den Kommentaren unten zu stellen. Viel Spaß beim Codieren!

LogRocket: Vollständige Sichtbarkeit Ihrer Web-Apps

LogRocket ist eine Frontend-Anwendungsüberwachungslösung, mit der Sie Probleme so wiedergeben können, als ob sie in Ihrem eigenen Browser aufgetreten wären. Anstatt zu raten, warum Fehler auftreten, oder Benutzer nach Screenshots und Protokollauszügen zu fragen, können Sie mit LogRocket die Sitzung wiederholen, um schnell zu verstehen, was schief gelaufen ist. Es funktioniert perfekt mit jeder App, unabhängig vom Framework, und verfügt über Plugins, um zusätzlichen Kontext von Redux, Vuex und @ngrx/store zu protokollieren.

Neben der Protokollierung von Redux-Aktionen und -Zuständen zeichnet LogRocket Konsolenprotokolle, JavaScript-Fehler, Stacktraces, Netzwerkanfragen/-antworten mit Headern und Textkörpern, Browser-Metadaten und benutzerdefinierte Protokolle auf. Es instrumentiert auch das DOM, um HTML und CSS auf der Seite aufzuzeichnen und pixelgenaue Videos selbst der komplexesten Single-Page-Apps zu erstellen.

.

seo marketing wordpress seo seo hosting seo and marketing word press seo wordpress and seo wordpress marketing hosting seo seo press pro market seo seo & marketing seo e marketing e marketing seo seo pro wordpress marketing & seo seo di wordpress wordpress seo host hosting and seo wordpress hosting seo wordpress seo wordpress wordpress for marketing seo press wordpress marketing for seo

The source: https://nguyendiep.com
Category: news

Similar Posts

Leave a Reply

Your email address will not be published.