Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Lagring av bilder i en database anbefales generelt ikke. Å gjøre det kan fort bli dyrt på grunn av mengden lagring og prosessorkraft som kreves. Det er bedre å bruke en kostnadseffektiv og skalerbar lagringstjeneste som Supabase-lagring.

Nedenfor lærer du hvordan du laster opp bilder til en lagringsbøtte ved hjelp av Supabase JavaScript-klientbiblioteket og hvordan du serverer bildene i en Next.js-applikasjon.

Opprette et Supabase-prosjekt

Hvis du ikke allerede har en Next.js-applikasjon klar, følg den offisielle Startveiledning for Next.js for å lage din søknad.

Når du har gjort det, følg disse trinnene for å opprette en Supabase-database:

  1. Naviger til Supabase-nettstedet og opprett en ny konto. Logg inn hvis du allerede har en konto.
  2. Fra Supabase-dashbordet klikker du på Opprett et nytt prosjekt knapp.
  3. Gi prosjektet ditt et navn og klikk på
    instagram viewer
    Lag prosjekt knapp. Når Supabase oppretter prosjektet, vil det omdirigere deg til prosjektdashbordet

Etter å ha opprettet prosjektet, lag en lagringsbøtte.

Opprette en Supabase lagringsbøtte

En lagringsbøtte lar deg lagre mediefiler som bilder og videoer. I Supabase kan du opprette en lagringsbøtte på dashbordet eller bruke klientbiblioteket.

Følg disse trinnene for å bruke dashbordet:

  1. Gå til Supabase lagring side i dashbordet.
  2. Klikk Ny bøtte og skriv inn et navn for bøtta. Du kan navngi det bilder siden du vil lagre bilder i det.
  3. Klikk Lag bøtte.

Deretter vil du sette opp en Supabase-klient i appen din for å samhandle med bøtta.

Sette opp Supabase-klienten

Begynn med å installere supabase-js klientbibliotek via terminalen:

npm installer @supabase/supabase-js

Deretter oppretter du en ny mappe kalt lib ved roten av programmet eller i src-mappen hvis du bruker den. I denne mappen legger du til en ny fil med navnet supabase.js og bruk følgende kode for å initialisere Supabase-klienten.

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

Erstatt prosjektets URL og anon-nøkkelen med dine egne detaljer som du kan finne i Supabase prosjektinnstillinger. Du kan kopiere detaljene i .env-filen og referere til dem derfra.

SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="ditt_prosjekt_anon_nøkkel"

Nå, i supabase.js, bør du ha:

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

Når du har gjort det, lag et skjema som godtar bildene.

Opprette et skjema som godtar bilder

Innsiden mappen Next.js-appen av applikasjonen din, opprett en undermappe med navnet laste opp og legg til en ny fil med navnet side.js. Dette vil opprette en ny side tilgjengelig på ruten /upload. Hvis du bruker Next.js 12, lag upload.js i sider mappe.

På opplastingssiden legger du til følgende kode for å lage skjemaet.

"bruk klient";
import { useState } fra"reagere";
eksportmisligholdefunksjonSide() {
konst [fil, settfil] = brukState([]);


konst handleSubmit = asynkron (e) => {
 e.preventDefault();
// Last opp bilde
 };


konst handleFileSelected = (e) => {
 setfil (e.target.files[0]);
 };
komme tilbake (


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

Når du velger en fil og klikker på send-knappen, skal skjemaet kalle handleSubmit-funksjonen. Det er i denne funksjonen du laster opp bildet.

For store skjemaer med flere felt kan det være enklere å bruk et skjemabibliotek som formik å håndtere validering og innsending.

Laste opp en bildefil til en Supabase-lagringsbøtte

I handleSubmit-funksjonen bruker du Supabase-klienten til å laste opp bildet ved å legge til koden nedenfor.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
konst filnavn = `${uuidv4()}-${file.name}`;
konst { data, feil } = avvente supabase.lagring
 .fra("Bilder")
 .upload (filnavn, fil, {
 cacheControl: "3600",
 opprør: falsk,
 });
konst filbane = data.bane;
// lagre filbane i databasen
 };

I denne funksjonen oppretter du et unikt filnavn ved å sette sammen filnavnet og en UUID generert av uuid npm-pakken. Dette anbefales for å unngå å overskrive filer som deler samme navn.

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

npm installer uuid

Deretter, øverst på opplastingssiden, importerer du versjon 4 av uuid.

import { v4 som uuidv4 } fra"uuid";

Hvis du ikke vil bruke uuid-pakken, finnes det noen andre metoder du kan bruke for å generere unike IDer.

Deretter bruker du supabase-klienten til å laste opp filen til lagringsbøtten kalt "bilder". Husk å importere supabase-klienten øverst i filen.

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

Merk at du passerer stien til bildet og selve bildet. Denne banen fungerer på samme måte som i filsystemet. For eksempel, hvis du lagrer bildet i en mappe i bøtten kalt offentlig, vil du spesifisere banen som "/public/filename".

Supabase vil returnere et objekt som inneholder data- og feilobjektet. Dataobjektet inneholder URL-en til bildet du nettopp lastet opp.

For at denne opplastingsfunksjonen skal fungere, må du opprette en tilgangspolicy som lar applikasjonen din sette inn og lese data i en Supabase-lagringsbøtte ved å følge disse trinnene:

  1. På prosjektdashbordet ditt klikker du på Oppbevaring fanen på venstre sidefelt.
  2. Velg din oppbevaringsbøtte og klikk på Adgang fanen.
  3. Under Bøttepolitikk, Klikk på Ny politikk knapp.
  4. Velg For full tilpasning mulighet for å lage en policy fra bunnen av.
  5. I Legg til policy dialogboks, skriv inn et navn for policyen din (f.eks. "Tillat innsetting og lesing").
  6. Plukke ut SETT INN og PLUKKE UT tillatelser fra Tillatte operasjoner nedtrekksmenyen.
  7. Klikk på Anmeldelse knappen for å se gjennom retningslinjene.
  8. Klikk på Lagre for å legge til policyen.

Du skal nå kunne laste opp bilder uten å få opp en tilgangsfeil.

Visning av de opplastede bildene i applikasjonen din

For å vise bildet på nettstedet ditt trenger du en offentlig URL, som du kan hente på to forskjellige måter.

Du kan bruke Supabase-klienten slik:

konst filbane = "path_to_file_in_buckey"
konst { data } = supabase
 .Oppbevaring
 .fra('Bilder')
 .getPublicUrl(`${filepath}`)

Eller du kan manuelt koble sammen nettadressen for bøtte med filbanen:

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

Bruk hvilken metode du foretrekker. Når du har filbanen, kan du bruke den i Next.js-bildekomponenten slik:

"" width={200} høyde={200}/>

Denne koden vil vise bildet på nettstedet ditt.

Opprette robuste applikasjoner med Supabase

Ved å bruke denne koden kan du godta en fil fra en bruker gjennom et skjema og laste den opp til Supabase-lagring. Du kan deretter hente det bildet og vise det på nettstedet ditt.

I tillegg til å lagre bilder, har Supabase andre funksjoner. Du kan opprette en PostgreSQL-database, skrive kantfunksjoner og sette opp autentisering for brukerne dine.