Kako naložiti slike v vedro za shranjevanje Supabase iz aplikacije Next.js

Shranjevanje slik v bazo podatkov na splošno ni priporočljivo. To lahko hitro postane drago zaradi količine potrebnega prostora za shranjevanje in procesorske moči. Boljša je uporaba stroškovno učinkovite in razširljive storitve shranjevanja, kot je shranjevanje Supabase.

Spodaj se boste naučili, kako naložiti slike v vedro za shranjevanje z odjemalsko knjižnico JavaScript Supabase in kako servirati slike v aplikaciji Next.js.

Ustvarjanje projekta Supabase

Če še nimate pripravljene aplikacije Next.js, sledite uradniku Vodnik za začetek uporabe Next.js da ustvarite svojo aplikacijo.

Ko to storite, sledite tem korakom za ustvarjanje baze podatkov Supabase:

1. Pojdite na spletno mesto Supabase in ustvarite nov račun. Če že imate račun, se prijavite.
2. Na nadzorni plošči Supabase kliknite Ustvarite nov projekt gumb.
3. Poimenujte svoj projekt in kliknite
   instagram viewer
   Ustvari projekt gumb. Ko Supabase ustvari projekt, vas bo preusmeril na nadzorno ploščo projekta

Ko ustvarite projekt, ustvarite vedro za shranjevanje.

Ustvarjanje vedra za shranjevanje Supabase

Vedro za shranjevanje vam omogoča shranjevanje medijskih datotek, kot so slike in videoposnetki. V Supabase lahko ustvarite vedro za shranjevanje na nadzorni plošči ali uporabite odjemalsko knjižnico.

Če želite uporabiti nadzorno ploščo, sledite tem korakom:

1. Pojdi na Shramba Supabase strani na nadzorni plošči.
2. Kliknite Novo vedro in vnesite ime za vedro. Lahko ga poimenujete slike, saj boste vanj shranjevali slike.
3. Kliknite Ustvari vedro.

Nato boste v svoji aplikaciji nastavili odjemalca Supabase za interakcijo z vedro.

Nastavitev odjemalca Supabase

Začnite z namestitvijo odjemalske knjižnice supabase-js prek terminala:

npm namestite @supabase/supabase-js

Nato ustvarite novo mapo z imenom lib v korenu vaše aplikacije ali v mapi src, če jo uporabljate. V tej mapi dodajte novo datoteko z imenom supabase.js in uporabite naslednjo kodo za inicializacijo odjemalca Supabase.

uvoz { createClient } od'@supabase/supabase-js'
izvozkonst supabase = createClient('', '')

Zamenjajte URL projekta in anon ključ s svojimi podrobnostmi, ki jih najdete v Nastavitve projekta Supabase. Podrobnosti lahko kopirate v datoteko .env in se od tam sklicujete nanje.

SUPABASE_PROJECT_URL="url_vašega_projekta"
SUPABASE_PROJECT_ANON_KEY="vaš_projekt_anon_ključ"

Zdaj bi v supabase.js morali imeti:

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

Ko to storite, ustvarite obrazec, ki bo sprejel slike.

Ustvarjanje obrazca, ki sprejema slike

V notranjosti mapo aplikacije Next.js vaše aplikacije ustvarite podmapo z imenom nalaganje in dodajte novo datoteko z imenom page.js. To bo ustvarilo novo stran, ki je na voljo na poti /upload. Če uporabljate Next.js 12, ustvarite upload.js v strani mapo.

Na strani za nalaganje dodajte naslednjo kodo, da ustvarite obrazec.

"uporabi odjemalca";
uvoz {useState} od"reagirati";
izvozprivzetofunkcijoStran() {
konst [datoteka, setfile] = useState([]);
konst handleSubmit = asinh (e) => {
 e.preventDefault();
// naloži sliko
 };
konst handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
vrnitev (


"mapa" ime="slika" onChange={handleFileSelected} />
"oddaj">Naloži sliko</button>
 </form>
 );
}

Ko izberete datoteko in kliknete gumb za pošiljanje, mora obrazec poklicati funkcijo handleSubmit. V tej funkciji boste naložili sliko.

Za velike obrazce z več polji je lahko lažje uporabite knjižnico obrazcev, kot je formik za upravljanje potrjevanja in predložitve.

Nalaganje slikovne datoteke v vedro za shranjevanje Supabase

V funkciji handleSubmit uporabite odjemalca Supabase za nalaganje slike, tako da dodate spodnjo kodo.

konst handleSubmit = asinh (e) => {
 e.preventDefault();
konst ime datoteke = `${uuidv4()}-${file.name}`;
konst { podatki, napaka } = čakati supabase.storage
 .od("slike")
 .upload (ime datoteke, datoteka, {
 cacheControl: "3600",
 upsert: lažno,
 });
konst filepath = data.path;
// shrani pot datoteke v bazo podatkov
 };

V tej funkciji ustvarite edinstveno ime datoteke z združevanjem imena datoteke in UUID-ja, ki ga ustvari paket uuid npm. To priporočamo, da se izognete prepisovanju datotek z istim imenom.

Paket uuid boste morali namestiti prek npm, zato kopirajte in zaženite spodnji ukaz v terminalu.

npm namestite uuid

Nato na vrhu strani za nalaganje uvozite različico 4 uuid.

uvoz { v4 kot uuidv4} od"uuid";

Če ne želite uporabljati paketa uuid, obstajajo drugi metode, ki jih lahko uporabite za ustvarjanje edinstvenih ID-jev.

Nato uporabite odjemalca supabase za nalaganje datoteke v vedro za shranjevanje, imenovano »slike«. Ne pozabite uvoziti odjemalca supabase na vrh datoteke.

uvoz {supabase} od"@/lib/supabase";

Upoštevajte, da podajate pot do slike in samo sliko. Ta pot deluje enako kot v datotečnem sistemu. Če bi na primer sliko shranjevali v mapo v vedru z imenom public, bi podali pot kot »/public/filename«.

Supabase bo vrnil objekt, ki vsebuje podatke in objekt napake. Podatkovni objekt vsebuje URL do slike, ki ste jo pravkar naložili.

Da bo ta funkcija nalaganja delovala, morate ustvariti pravilnik o dostopu, ki vaši aplikaciji omogoča vstavljanje in branje podatkov v vedru za shranjevanje Supabase, tako da sledite tem korakom:

1. Na nadzorni plošči projekta kliknite na Shranjevanje zavihek na levi stranski vrstici.
2. Izberite svoje vedro za shranjevanje in kliknite na Dostop zavihek.
3. Spodaj Politike vedra, kliknite na Nova politika gumb.
4. Izberite Za popolno prilagoditev možnost ustvarjanja pravilnika iz nič.
5. V Dodaj pravilnik vnesite ime za vaš pravilnik (npr. »Dovoli vstavljanje in branje«).
6. Izberite VSTAVI in IZBERI dovoljenja od Dovoljene operacije spustni meni.
7. Kliknite na Pregled gumb za pregled pravilnikov.
8. Kliknite na Shrani gumb za dodajanje pravilnika.

Zdaj bi morali imeti možnost nalaganja slik brez sprožitve napake pri dostopu.

Storitev naloženih slik v vaši aplikaciji

Če želite prikazati sliko na svojem spletnem mestu, potrebujete javni URL, ki ga lahko pridobite na dva različna načina.

Odjemalca Supabase lahko uporabljate takole:

konst pot datoteke = "pot_do_datoteke_v_buckeyju"
konst {podatki} = nadosnova
 .shranjevanje
 .od('slike')
 .getPublicUrl(`${filepath}`)

Lahko pa ročno povežete URL vedra s potjo datoteke:

konst pot datoteke = `${bucket_url}/${filepath}`

Uporabite katero koli metodo, ki vam je ljubša. Ko imate pot do datoteke, jo lahko uporabite v slikovni komponenti Next.js takole:

"" širina={200} višina={200}/>

Ta koda bo prikazala sliko na vašem spletnem mestu.

Ustvarjanje robustnih aplikacij s Supabase

S to kodo lahko sprejmete datoteko od uporabnika prek obrazca in jo naložite v shrambo Supabase. Nato lahko pridobite to sliko in jo ponudite na svojem spletnem mestu.

Poleg shranjevanja slik ima Supabase še druge funkcije. Ustvarite lahko bazo podatkov PostgreSQL, napišete robne funkcije in nastavite avtentikacijo za svoje uporabnike.