Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Das Speichern von Bildern in einer Datenbank wird im Allgemeinen nicht empfohlen. Dies kann aufgrund der erforderlichen Speicher- und Verarbeitungsleistung schnell teuer werden. Die Verwendung eines kostengünstigen und skalierbaren Speicherdienstes wie Supabase-Speicher ist besser.

Im Folgenden erfahren Sie, wie Sie Bilder mithilfe der JavaScript-Clientbibliothek von Supabase in einen Speicher-Bucket hochladen und wie Sie die Bilder in einer Next.js-Anwendung bereitstellen.

Erstellen eines Supabase-Projekts

Wenn Sie noch keine Next.js-Anwendung bereit haben, folgen Sie dem offiziellen Next.js-Erste-Schritte-Leitfaden um Ihre Anwendung zu erstellen.

Führen Sie anschließend die folgenden Schritte aus, um eine Supabase-Datenbank zu erstellen:

  1. Navigieren Sie zur Supabase-Website und erstellen Sie ein neues Konto. Wenn Sie bereits ein Konto haben, melden Sie sich an.
    2. instagram viewer
  2. Klicken Sie im Supabase-Dashboard auf die Erstellen Sie ein neues Projekt Taste.
  3. Geben Sie Ihrem Projekt einen Namen und klicken Sie auf Projekt erstellen Taste. Sobald Supabase das Projekt erstellt hat, leitet es Sie zum Projekt-Dashboard weiter

Erstellen Sie nach dem Erstellen des Projekts einen Speicherbucket.

Erstellen eines Supabase-Storage-Buckets

Ein Speicher-Bucket ermöglicht es Ihnen, Mediendateien wie Bilder und Videos zu speichern. In Supabase können Sie einen Speicher-Bucket auf dem Dashboard erstellen oder die Client-Bibliothek verwenden.

Gehen Sie folgendermaßen vor, um das Dashboard zu verwenden:

  1. Gehen Sie zum Supabase-Speicher Seite im Dashboard.
  2. Klicken Neuer Eimer und geben Sie einen Namen für den Bucket ein. Sie können es Bilder nennen, da Sie Bilder darin speichern werden.
  3. Klicken Eimer erstellen.

Als Nächstes richten Sie einen Supabase-Client in Ihrer App ein, um mit dem Bucket zu interagieren.

Einrichten des Supabase-Clients

Beginnen Sie mit der Installation der supabase-js-Clientbibliothek über das Terminal:

npm installiere @supabase/supabase-js

Erstellen Sie dann einen neuen Ordner mit dem Namen lib im Stammverzeichnis Ihrer Anwendung oder im Ordner src, falls Sie ihn verwenden. Fügen Sie in diesem Ordner eine neue Datei mit dem Namen hinzu superbase.js und verwenden Sie den folgenden Code, um den Supabase-Client zu initialisieren.

importieren { createClient } aus'@supabase/supabase-js'
Exportkonst superbase = createClient('', '')

Ersetzen Sie die Projekt-URL und den anonymen Schlüssel durch Ihre eigenen Angaben, die Sie in der finden Supabase-Projekteinstellungen. Sie können die Details in die .env-Datei kopieren und von dort darauf verweisen.

SUPABASE_PROJECT_URL="Ihr_Projekt_URL"
SUPABASE_PROJECT_ANON_KEY="Ihr_Projekt_anon_Schlüssel"

Jetzt sollten Sie in supabase.js Folgendes haben:

Exportkonst superbase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Sobald Sie das getan haben, erstellen Sie ein Formular, das die Bilder akzeptiert.

Erstellen eines Formulars, das Bilder akzeptiert

Innen den Next.js-App-Ordner Ihrer Anwendung erstellen Sie einen Unterordner mit dem Namen hochladen und fügen Sie eine neue Datei mit dem Namen hinzu page.js. Dadurch wird eine neue Seite erstellt, die unter der /upload-Route verfügbar ist. Wenn Sie Next.js 12 verwenden, erstellen Sie upload.js in der Seiten Ordner.

Fügen Sie auf der Upload-Seite den folgenden Code hinzu, um das Formular zu erstellen.

"Client verwenden";
importieren { useState } aus"reagieren";
ExportStandardFunktionBuchseite() {
konst [Datei, Setfile] = useState([]);


konst handleSubmit = asynchron (e) => {
 e.preventDefault();
// Bild hochladen
 };


konst handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
zurückkehren (


"Datei" name="Bild" onChange={handleFileSelected} />

Wenn Sie eine Datei auswählen und auf die Schaltfläche „Senden“ klicken, sollte das Formular die Funktion „handleSubmit“ aufrufen. In dieser Funktion laden Sie das Bild hoch.

Bei großen Formularen mit mehreren Feldern kann es einfacher sein Verwenden Sie eine Formularbibliothek wie formik um die Validierung und Einreichung zu handhaben.

Hochladen einer Bilddatei in einen Supabase Storage Bucket

Verwenden Sie in der handleSubmit-Funktion den Supabase-Client, um das Bild hochzuladen, indem Sie den folgenden Code hinzufügen.

konst handleSubmit = asynchron (e) => {
 e.preventDefault();
konst Dateiname = `${uuidv4()}-${file.name}`;
konst { Daten, Fehler } = erwarten superbase.storage
 .aus("Bilder")
 .upload (Dateiname, Datei, {
 cacheControl: "3600",
 upsert: FALSCH,
 });
konst filepath = data.path;
// Dateipfad in Datenbank speichern
 };

In dieser Funktion erstellen Sie einen eindeutigen Dateinamen, indem Sie den Dateinamen und eine vom uuid-npm-Paket generierte UUID verketten. Dies wird empfohlen, um zu vermeiden, dass Dateien mit demselben Namen überschrieben werden.

Sie müssen das uuid-Paket über npm installieren, kopieren Sie also den folgenden Befehl und führen Sie ihn im Terminal aus.

npm installiert uuid

Importieren Sie dann oben auf der Upload-Seite Version 4 von uuid.

importieren { v4 als uuidv4 } aus"uuid";

Wenn Sie das uuid-Paket nicht verwenden möchten, gibt es einige andere Methoden, mit denen Sie eindeutige IDs generieren können.

Verwenden Sie als Nächstes den supabase-Client, um die Datei in den Speicher-Bucket mit dem Namen „images“ hochzuladen. Denken Sie daran, den supabase-Client am Anfang Ihrer Datei zu importieren.

importieren {supabasis} aus"@/lib/supabase";

Beachten Sie, dass Sie den Pfad zum Bild und das Bild selbst übergeben. Dieser Pfad funktioniert genauso wie im Dateisystem. Wenn Sie das Bild beispielsweise in einem Ordner namens „Öffentlich“ im Bucket speichern, würden Sie den Pfad als „/öffentlich/Dateiname“ angeben.

Supabase gibt ein Objekt zurück, das die Daten und das Fehlerobjekt enthält. Das Datenobjekt enthält die URL zu dem Bild, das Sie gerade hochgeladen haben.

Damit diese Upload-Funktion funktioniert, müssen Sie eine Zugriffsrichtlinie erstellen, die es Ihrer Anwendung ermöglicht, Daten in einen Supabase-Speicher-Bucket einzufügen und zu lesen, indem Sie die folgenden Schritte ausführen:

  1. Klicken Sie in Ihrem Projekt-Dashboard auf die Lagerung Tab in der linken Seitenleiste.
  2. Wählen Sie Ihren Storage-Bucket aus und klicken Sie auf Zugang Tab.
  3. Unter Bucket-Richtlinien, drücke den Neue Richtlinien Taste.
  4. Wähle aus Für eine vollständige Anpassung Möglichkeit, eine Richtlinie von Grund auf neu zu erstellen.
  5. Im Richtlinie hinzufügen Geben Sie einen Namen für Ihre Richtlinie ein (z. B. "Einfügen und Lesen zulassen").
  6. Wählen EINFÜGUNG Und WÄHLEN Berechtigungen von der Erlaubte Operationen Dropdown-Menü.
  7. Drücke den Rezension Schaltfläche, um die Richtlinien zu überprüfen.
  8. Drücke den Speichern Schaltfläche, um die Richtlinie hinzuzufügen.

Sie sollten jetzt in der Lage sein, Bilder hochzuladen, ohne einen Zugriffsfehler auszulösen.

Bereitstellen der hochgeladenen Bilder in Ihrer Anwendung

Um das Bild auf Ihrer Website bereitzustellen, benötigen Sie eine öffentliche URL, die Sie auf zwei verschiedene Arten abrufen können.

Sie können den Supabase-Client wie folgt verwenden:

konst Dateipfad = "Pfad_zur_Datei_in_buckey"
konst { Daten } = Superbasis
 .Lagerung
 .aus('Bilder')
 .getPublicUrl(`${Dateipfad}`)

Oder Sie können die Bucket-URL manuell mit dem Dateipfad verketten:

konst Dateipfad = `${bucket_url}/${Dateipfad}`

Verwenden Sie die Methode, die Sie bevorzugen. Sobald Sie den Dateipfad haben, können Sie ihn wie folgt in der Next.js-Bildkomponente verwenden:

"" Breite = {200} Höhe={200}/>

Dieser Code zeigt das Bild auf Ihrer Website an.

Robuste Anwendungen mit Supabase erstellen

Mit diesem Code können Sie eine Datei von einem Benutzer über ein Formular akzeptieren und in den Supabase-Speicher hochladen. Sie können dieses Bild dann abrufen und auf Ihrer Website bereitstellen.

Neben dem Speichern von Bildern hat Supabase noch andere Funktionen. Sie können eine PostgreSQL-Datenbank erstellen, Edge-Funktionen schreiben und die Authentifizierung für Ihre Benutzer einrichten.