Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Det anbefales generelt ikke at gemme billeder i en database. At gøre det kan hurtigt blive dyrt på grund af mængden af ​​lager- og processorkraft, der kræves. Det er bedre at bruge en omkostningseffektiv og skalerbar lagertjeneste som Supabase storage.

Nedenfor lærer du, hvordan du uploader billeder til en lagerbøtte ved hjælp af Supabase JavaScript-klientbiblioteket, og hvordan du tjener billederne i en Next.js-applikation.

Oprettelse af et Supabase-projekt

Hvis du ikke allerede har en Next.js-applikation klar, skal du følge den officielle Guide til at komme i gang med Next.js for at oprette din ansøgning.

Når du har gjort det, skal du følge disse trin for at oprette en Supabase-database:

  1. Naviger til Supabase-webstedet og opret en ny konto. Hvis du allerede har en konto, skal du logge ind.
  2. Fra Supabase-dashboardet skal du klikke på Opret et nyt projekt knap.
    3. instagram viewer
  3. Giv dit projekt et navn, og klik på Opret projekt knap. Når Supabase har oprettet projektet, vil det omdirigere dig til projektets dashboard

Når du har oprettet projektet, skal du oprette en opbevaringsspand.

Oprettelse af en Supabase-opbevaringsspand

En opbevaringsbøtte giver dig mulighed for at gemme mediefiler som billeder og videoer. I Supabase kan du oprette en lagerbøtte på dashboardet eller bruge klientbiblioteket.

Følg disse trin for at bruge dashboardet:

  1. Gå til Supabase opbevaring side i Dashboardet.
  2. Klik Ny spand og indtast et navn til spanden. Du kan navngive det billeder, da du vil gemme billeder i det.
  3. Klik Opret spand.

Dernæst vil du konfigurere en Supabase-klient i din app til at interagere med bøtten.

Opsætning af Supabase-klienten

Begynd med at installere supabase-js klientbibliotek via terminalen:

npm installer @supabase/supabase-js

Opret derefter en ny mappe med navnet lib i roden af ​​dit program eller i src-mappen, hvis du bruger den. Tilføj en ny fil med navnet i denne mappe supabase.js og brug følgende kode til at initialisere Supabase-klienten.

importere { createClient } fra'@supabase/supabase-js'
eksportkonst supabase = createClient('', '')

Erstat projektets URL og anon-nøglen med dine egne detaljer, som du kan finde i Supabase projektindstillinger. Du kan kopiere detaljerne i .env-filen og henvise til dem derfra.

SUPABASE_PROJECT_URL="dit_projekt_url"
SUPABASE_PROJECT_ANON_KEY="dit_projekt_anon_nøgle"

Nu, i supabase.js, skulle du have:

eksportkonst supabase = createClient(
 proces.env. SUPABASE_PROJECT_URL,
 proces.env. SUPABASE_ANON_KEY
);

Når du har gjort det, skal du oprette en formular, der accepterer billederne.

Oprettelse af en formular, der accepterer billeder

Inde mappen Next.js app i din ansøgning skal du oprette en undermappe med navnet upload og tilføje en ny fil med navnet side.js. Dette vil oprette en ny side tilgængelig på /upload-ruten. Hvis du bruger Next.js 12, skal du oprette upload.js i sider folder.

Tilføj følgende kode på uploadsiden for at oprette formularen.

"brug klient";
importere { useState } fra"reagere";
eksportStandardfungereSide() {
konst [fil, sætfil] = useState([]);


konst handleSubmit = asynkron (e) => {
 e.preventDefault();
// upload billede
 };


konst handleFileSelected = (e) => {
 sætfil (e.target.files[0]);
 };
Vend tilbage (


"fil" navn="billede" onChange={handleFileSelected} />

Når du vælger en fil og klikker på send-knappen, skal formularen kalde handleSubmit-funktionen. Det er i denne funktion, du uploader billedet.

For store formularer med flere felter kan det være nemmere at brug et formularbibliotek som formik at håndtere validering og indsendelse.

Upload af en billedfil til en Supabase Storage Bucket

I handleSubmit-funktionen skal du bruge Supabase-klienten til at uploade billedet ved at tilføje koden nedenfor.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
konst filnavn = `${uuidv4()}-${file.name}`;
konst { data, fejl } = vente supabase.storage
 .fra("billeder")
 .upload (filnavn, fil, {
 cachekontrol: "3600",
 oprør: falsk,
 });
konst filsti = data.sti;
// gem filsti i databasen
 };

I denne funktion opretter du et unikt filnavn ved at sammenkæde filnavnet og et UUID genereret af uuid npm-pakken. Dette anbefales for at undgå at overskrive filer med samme navn.

Du skal installere uuid-pakken via npm, så kopier og kør kommandoen nedenfor i terminalen.

npm installer uuid

Importer derefter version 4 af uuid øverst på uploadsiden.

importere {v4 som uuidv4 } fra"uuid";

Hvis du ikke vil bruge uuid-pakken, er der nogle andre metoder, du kan bruge til at generere unikke id'er.

Brug derefter supabase-klienten til at uploade filen til lagerbøtten kaldet "billeder". Husk at importere supabase-klienten øverst i din fil.

importere { supabase } fra"@/lib/supabase";

Bemærk, at du passerer stien til billedet og selve billedet. Denne sti fungerer på samme måde, som den gør i filsystemet. For eksempel, hvis du gemme billedet i en mappe i bøtten kaldet offentlig, ville du angive stien som "/public/filename".

Supabase returnerer et objekt, der indeholder data- og fejlobjektet. Dataobjektet indeholder URL'en til det billede, du lige har uploadet.

For at denne uploadfunktion skal fungere, skal du oprette en adgangspolitik, der tillader din applikation at indsætte og læse data i en Supabase-lagringsbøtte ved at følge disse trin:

  1. På dit projektdashboard skal du klikke på Opbevaring fanen i venstre sidebjælke.
  2. Vælg din opbevaringsspand og klik på Adgang fanen.
  3. Under Bucket politikker, klik på Ny politik knap.
  4. Vælg For fuld tilpasning mulighed for at oprette en politik fra bunden.
  5. I den Tilføj politik dialogboks, skal du indtaste et navn til din politik (f.eks. "Tillad indsæt og læs").
  6. Vælg INDSÆT og VÆLG tilladelser fra Tilladte operationer Drop down menu.
  7. Klik på Anmeldelse knappen for at gennemgå politikkerne.
  8. Klik på Gemme knappen for at tilføje politikken.

Du skulle nu være i stand til at uploade billeder uden at give en adgangsfejl.

Visning af de uploadede billeder i din applikation

For at vise billedet på dit websted skal du bruge en offentlig URL, som du kan hente på to forskellige måder.

Du kan bruge Supabase-klienten sådan her:

konst filsti = "sti_til_fil_i_buckey"
konst { data } = supabase
 .opbevaring
 .fra('billeder')
 .getPublicUrl(`${filepath}`)

Eller du kan manuelt sammenkæde bucket-URL'en med filstien:

konst filsti = `${bucket_url}/${filepath}`

Brug den metode, du foretrækker. Når du har filstien, kan du bruge den i Next.js-billedkomponenten sådan her:

"" bredde={200} højde={200}/>

Denne kode viser billedet på dit websted.

Oprettelse af robuste applikationer med Supabase

Ved at bruge denne kode kan du acceptere en fil fra en bruger gennem en formular og uploade den til Supabase-lageret. Du kan derefter hente det billede og vise det på dit websted.

Udover at gemme billeder, har Supabase andre funktioner. Du kan oprette en PostgreSQL-database, skrive edge-funktioner og konfigurere godkendelse for dine brugere.