Kuvien lataaminen Supabase-tallennustilaan Next.js-sovelluksesta

Kuvien tallentamista tietokantaan ei yleensä suositella. Näin tekeminen voi nopeasti tulla kalliiksi tarvittavan tallennus- ja prosessointitehon vuoksi. Kustannustehokkaan ja skaalautuvan tallennuspalvelun, kuten Supabase-tallennuspalvelun, käyttö on parempi.

Alta opit lataamaan kuvia tallennusämpäriin Supabase JavaScript -asiakaskirjaston avulla ja kuinka kuvia voidaan tarjota Next.js-sovelluksessa.

Supabase-projektin luominen

Jos sinulla ei vielä ole Next.js-sovellusta valmiina, seuraa virallisia ohjeita Next.js aloitusopas luodaksesi sovelluksesi.

Kun olet tehnyt sen, luo Supabase-tietokanta seuraavasti:

1. Siirry Supabase-verkkosivustolle ja luo uusi tili. Jos sinulla on jo tili, kirjaudu sisään.
2. Napsauta Supabase-hallintapaneelissa Luo uusi projekti -painiketta.
3. Anna projektillesi nimi ja napsauta Luo projekti -painiketta. Kun Supabase on luonut projektin, se ohjaa sinut projektin hallintapaneeliin

Kun olet luonut projektin, luo tallennusämpäri.

Supabase Storage Bucketin luominen

Tallennusämpäriin voit tallentaa mediatiedostoja, kuten kuvia ja videoita. Supabasessa voit luoda tallennustilan kojelautaan tai käyttää asiakaskirjastoa.

Voit käyttää kojelautaa seuraavasti:

1. Siirry kohtaan Supabase tallennustila -sivu hallintapaneelissa.
2. Klikkaus Uusi kauha ja anna ämpärille nimi. Voit nimetä sen kuviksi, koska tallennat siihen kuvia.
3. Klikkaus Luo kauha.

Seuraavaksi määrität sovellukseesi Supabase-asiakasohjelman, joka on vuorovaikutuksessa ämpärin kanssa.

Supabase-asiakkaan määrittäminen

Aloita asentamalla supabase-js-asiakaskirjasto päätteen kautta:

npm asennus @supabase/supabase-js

Luo sitten uusi kansio nimeltä lib sovelluksesi juureen tai src-kansioon, jos käytät sitä. Lisää tähän kansioon uusi tiedosto nimeltä supabase.js ja käytä seuraavaa koodia Supabase-asiakasohjelman alustamiseen.

tuonti { luo asiakas } alkaen'@supabase/supabase-js'
viedäkonst supabase = createClient('', '')

Korvaa projektin URL-osoite ja anon-avain omilla tiedoillasi, jotka löydät Supabase-projektin asetukset. Voit kopioida tiedot .env-tiedostosta ja viitata niihin sieltä.

SUPABASE_PROJECT_URL="oma_projektisi_url"
SUPABASE_PROJECT_ANON_KEY="projektisi_anon_avain"

Nyt supabase.js: ssa sinulla pitäisi olla:

viedäkonst supabase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Kun olet tehnyt sen, luo lomake, joka hyväksyy kuvat.

Kuvia hyväksyvän lomakkeen luominen

Sisällä Next.js-sovelluskansioon luo sovelluksestasi alikansio nimeltä lataa ja lisää uusi tiedosto nimeltä page.js. Tämä luo uuden sivun, joka on käytettävissä /upload-reitillä. Jos käytät Next.js 12:ta, luo upload.js tiedostoon sivuja kansio.

Luo lomake lisäämällä lataussivulle seuraava koodi.

"käytä asiakasta";
tuonti { useState } alkaen"reagoi";
viedäoletuksenatoimintoSivu() {
konst [tiedosto, setfile] = useState([]);
konst handleSubmit = asynk (e) => {
 e.preventDefault();
// lataa kuva
 };
konst handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
palata (


"tiedosto" nimi ="kuva" onChange={handleFileSelected} />
"Lähetä">Lataa kuva</button>
 </form>
 );
}

Kun valitset tiedoston ja napsautat lähetyspainiketta, lomakkeen pitäisi kutsua handleSubmit-toiminto. Tässä toiminnossa lataat kuvan.

Suurille lomakkeille, joissa on useita kenttiä, se voi olla helpompaa käytä lomakekirjastoa, kuten formik hoitaa validoinnin ja toimituksen.

Kuvatiedoston lataaminen Supabase-tallennustilaan

Käytä handleSubmit-funktiossa Supabase-asiakasohjelmaa kuvan lataamiseen lisäämällä alla oleva koodi.

konst handleSubmit = asynk (e) => {
 e.preventDefault();
konst tiedostonimi = `${uuidv4()}-${tiedosto.nimi}`;
konst { data, error } = odottaa supabase.storage
 .from("kuvat")
 .upload (tiedostonimi, tiedosto, {
 välimuistin hallinta: "3600",
 upsert: väärä,
 });
konst tiedostopolku = data.polku;
// tallenna tiedostopolku tietokantaan
 };

Tässä funktiossa luot yksilöllisen tiedostonimen yhdistämällä tiedostonimen ja uuid npm -paketin luoman UUID: n. Tämä on suositeltavaa, jotta vältytään samannimisten tiedostojen korvaamiselta.

Sinun on asennettava uuid-paketti npm: n kautta, joten kopioi ja suorita alla oleva komento terminaalissa.

npm install uuid

Tuo sitten lataussivun yläreunasta uuid: n versio 4.

tuonti { v4 kuten uuidv4 } alkaen"uuid";

Jos et halua käyttää uuid-pakettia, on olemassa joitain muita menetelmät, joilla voit luoda yksilöllisiä tunnuksia.

Lataa seuraavaksi tiedosto supabase-asiakasohjelmalla "images"-nimiseen tallennustilaan. Muista tuoda supabase-asiakasohjelma tiedostosi yläosassa.

tuonti { supabase } alkaen"@/lib/supabase";

Huomaa, että ohitat kuvan polun ja itse kuvan. Tämä polku toimii samalla tavalla kuin tiedostojärjestelmässä. Jos esimerkiksi tallennat kuvan kansioon, jonka nimi on julkinen, määrität polkuksi "/public/filename".

Supabase palauttaa objektin, joka sisältää data- ja virheobjektin. Dataobjekti sisältää juuri lataamasi kuvan URL-osoitteen.

Jotta tämä lähetystoiminto toimisi, sinun on luotava käyttöoikeuskäytäntö, joka sallii sovelluksesi lisätä ja lukea tietoja Supabase-tallennustilaan seuraavasti:

1. Napsauta projektisi hallintapaneelissa Varastointi -välilehti vasemmassa sivupalkissa.
2. Valitse säilytysastiasi ja napsauta Pääsy -välilehti.
3. Alla Kauhan politiikka, Klikkaa Uusi politiikka -painiketta.
4. Valitse Täydelliseen mukauttamiseen mahdollisuus luoda käytäntö tyhjästä.
5. Vuonna Lisää käytäntö -valintaikkunassa, anna käytännöllesi nimi (esim. "Salli lisääminen ja lukeminen").
6. Valitse LISÄÄ ja VALITSE luvat käyttäjältä Sallitut toiminnot pudotusvalikosta.
7. Klikkaa Arvostelu -painiketta nähdäksesi käytännöt.
8. Klikkaa Tallentaa -painiketta lisätäksesi käytännön.

Sinun pitäisi nyt pystyä lataamaan kuvia ilman käyttövirhettä.

Ladattujen kuvien tarjoaminen sovelluksessasi

Jotta voit näyttää kuvan sivustollasi, tarvitset julkisen URL-osoitteen, jonka voit hakea kahdella eri tavalla.

Voit käyttää Supabase-asiakasta seuraavasti:

konst tiedostopolku = "polku_tiedostoon_buckeyssa"
konst { tiedot } = alakanta
 .tallennustila
 .from("kuvat")
 .getPublicUrl(`${filepath}`)

Tai voit ketjuttaa ryhmän URL-osoitteen manuaalisesti tiedostopolkuun:

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

Käytä haluamaasi menetelmää. Kun sinulla on tiedostopolku, voit käyttää sitä Next.js-kuvakomponentissa seuraavasti:

"" leveys={200} korkeus={200}/>

Tämä koodi näyttää kuvan sivustossasi.

Luotettavia sovelluksia Supabasella

Tällä koodilla voit hyväksyä tiedoston käyttäjältä lomakkeen kautta ja ladata sen Supabase-tallennustilaan. Voit sitten hakea kuvan ja näyttää sen sivustossasi.

Kuvien tallennuksen lisäksi Supabasessa on muita toimintoja. Voit luoda PostgreSQL-tietokannan, kirjoittaa reunafunktioita ja määrittää käyttäjillesi todennuksen.