Ako nahrať obrázky do úložiska Supabase z aplikácie Next.js

Ukladanie obrázkov do databázy sa vo všeobecnosti neodporúča. Ak tak urobíte, môže sa to rýchlo predražiť v dôsledku množstva potrebného skladovacieho a spracovateľského výkonu. Používanie nákladovo efektívnej a škálovateľnej služby úložiska, ako je úložisko Supabase, je lepšie.

Nižšie sa dozviete, ako nahrať obrázky do úložného priestoru pomocou klientskej knižnice Supabase JavaScript a ako poskytnúť obrázky v aplikácii Next.js.

Vytvorenie projektu Supabase

Ak ešte nemáte pripravenú aplikáciu Next.js, postupujte podľa oficiálneho Príručka Začíname s Next.js na vytvorenie vašej aplikácie.

Keď to urobíte, vytvorte databázu Supabase podľa týchto krokov:

1. Prejdite na webovú stránku Supabase a vytvorte si nový účet. Ak už máte účet, prihláste sa.
2. Na ovládacom paneli Supabase kliknite na Vytvorte nový projekt tlačidlo.
3. Pomenujte svoj projekt a kliknite na
   instagram viewer
   Vytvoriť projekt tlačidlo. Keď Supabase vytvorí projekt, presmeruje vás na hlavný panel projektu

Po vytvorení projektu vytvorte úložný priestor.

Vytvorenie úložiska Supabase

Úložný priestor vám umožňuje ukladať mediálne súbory, ako sú obrázky a videá. V Supabase môžete vytvoriť úložný priestor na ovládacom paneli alebo použiť knižnicu klienta.

Ak chcete použiť informačný panel, postupujte takto:

1. Choďte na Úložisko Supabase stránke na informačnom paneli.
2. Kliknite Nové vedierko a zadajte názov vedra. Môžete ho pomenovať obrázkami, pretože v ňom budete ukladať obrázky.
3. Kliknite Vytvoriť vedierko.

Ďalej vo svojej aplikácii nastavíte klienta Supabase na interakciu s vedro.

Nastavenie klienta Supabase

Začnite inštaláciou klientskej knižnice supabase-js cez terminál:

npm install @supabase/supabase-js

Potom vytvorte nový priečinok s názvom lib v koreňovom adresári vašej aplikácie alebo v priečinku src, ak ho používate. Do tohto priečinka pridajte nový súbor s názvom supabase.js a použite nasledujúci kód na inicializáciu klienta Supabase.

importovať { createClient } od'@supabase/supabase-js'
exportkonšt supabase = createClient('', '')

Nahraďte webovú adresu projektu a anon kľúč svojimi vlastnými podrobnosťami, ktoré nájdete v Nastavenia projektu Supabase. Podrobnosti môžete skopírovať do súboru .env a odtiaľ na ne odkazovať.

SUPABASE_PROJECT_URL="adresa_vášho_projektu"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Teraz by ste v supabase.js mali mať:

exportkonšt supabase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Keď to urobíte, vytvorte formulár, ktorý bude akceptovať obrázky.

Vytvorenie formulára, ktorý akceptuje obrázky

Vnútri priečinok aplikácie Next.js vašej aplikácie vytvorte podpriečinok s názvom nahrať a pridajte nový súbor s názvom page.js. Tým sa vytvorí nová stránka dostupná na ceste /upload. Ak používate Next.js 12, vytvorte upload.js v stránky priečinok.

Na stránku nahrávania pridajte nasledujúci kód na vytvorenie formulára.

"používať klienta";
importovať { useState } od"reagovať";
exportpredvolenáfunkciuStránka() {
konšt [file, setfile] = useState([]);
konšt handleSubmit = async (e) => {
 e.preventDefault();
// nahrať obrázok
 };
konšt handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
vrátiť (


"súbor" meno="obrázok" onChange={handleFileSelected} />
"Predložiť">Nahrať obrázok</button>
 </form>
 );
}

Keď vyberiete súbor a kliknete na tlačidlo Odoslať, formulár by mal zavolať funkciu handleSubmit. V tejto funkcii nahráte obrázok.

V prípade veľkých formulárov s viacerými poľami to môže byť jednoduchšie použite knižnicu formulárov, ako je formik na spracovanie overenia a odoslania.

Odovzdanie obrazového súboru do úložiska Supabase

Vo funkcii handleSubmit použite klienta Supabase na nahranie obrázka pridaním kódu nižšie.

konšt handleSubmit = async (e) => {
 e.preventDefault();
konšt názov súboru = `${uuidv4()}-${file.name}`;
konšt { údaje, chyba } = čakať supabase.úložisko
 .od("snímky")
 .upload (názov súboru, súbor, {
 cacheControl: "3600",
 upsert: falošný,
 });
konšt filepath = data.path;
// uložiť cestu k súboru do databázy
 };

V tejto funkcii vytvárate jedinečný názov súboru zreťazením názvu súboru a UUID vygenerovaného balíkom uuid npm. Toto sa odporúča, aby ste sa vyhli prepisovaniu súborov, ktoré majú rovnaký názov.

Budete musieť nainštalovať balík uuid cez npm, takže skopírujte a spustite príkaz uvedený nižšie v termináli.

npm install uuid

Potom v hornej časti stránky nahrávania importujte verziu 4 uuid.

importovať { v4 ako uuidv4} od"uuid";

Ak nechcete použiť balík uuid, existujú ďalšie metódy, ktoré môžete použiť na generovanie jedinečných identifikátorov.

Potom pomocou klienta supabase nahrajte súbor do úložného priestoru s názvom „obrázky“. Nezabudnite naimportovať klienta supabase v hornej časti súboru.

importovať { supabase } od"@/lib/supabase";

Všimnite si, že odovzdávate cestu k obrázku a samotný obrázok. Táto cesta funguje rovnako ako v súborovom systéme. Napríklad, ak ste obrázok ukladali do priečinka v segmente s názvom public, cestu by ste zadali ako „/public/filename“.

Supabase vráti objekt obsahujúci dáta a chybový objekt. Dátový objekt obsahuje adresu URL obrázka, ktorý ste práve nahrali.

Aby táto funkcia nahrávania fungovala, musíte vytvoriť politiku prístupu, ktorá vašej aplikácii umožní vkladať a čítať údaje do úložného segmentu Supabase podľa týchto krokov:

1. Na hlavnom paneli projektu kliknite na ikonu Skladovanie na ľavom bočnom paneli.
2. Vyberte svoj úložný priestor a kliknite na Prístup tab.
3. Pod Politiky vedra, kliknite na Nová politika tlačidlo.
4. Vyberte Pre úplné prispôsobenie možnosť vytvoriť politiku od začiatku.
5. V Pridať politiku zadajte názov svojej politiky (napr. „Povoliť vkladanie a čítanie“).
6. Vyberte VLOŽIŤ a VYBRAŤ povolenia od Povolené operácie rozbaľovacia ponuka.
7. Kliknite na Preskúmanie na prezeranie pravidiel.
8. Kliknite na Uložiť tlačidlo na pridanie politiky.

Teraz by ste mali byť schopní nahrať obrázky bez toho, aby ste vyvolali chybu prístupu.

Poskytovanie nahraných obrázkov vo vašej aplikácii

Ak chcete zobraziť obrázok na svojich stránkach, potrebujete verejnú adresu URL, ktorú môžete získať dvoma rôznymi spôsobmi.

Klienta Supabase môžete použiť takto:

konšt cesta k súboru = "path_to_file_in_buckey"
konšt { údaje } = supabáza
 .skladovanie
 .od('snímky')
 .getPublicUrl(`${filepath}`)

Alebo môžete ručne spojiť adresu URL segmentu s cestou k súboru:

konšt cesta k súboru = `${bucket_url}/${filepath}`

Použite ktorúkoľvek metódu, ktorú uprednostňujete. Keď máte cestu k súboru, môžete ju použiť v komponente obrázka Next.js takto:

"" šírka={200} vyska={200}/>

Tento kód zobrazí obrázok na vašej stránke.

Vytváranie robustných aplikácií so Supabase

Pomocou tohto kódu môžete prijať súbor od používateľa prostredníctvom formulára a nahrať ho do úložiska Supabase. Potom môžete tento obrázok získať a zobraziť na svojej stránke.

Okrem ukladania obrázkov má Supabase aj ďalšie funkcie. Môžete vytvoriť databázu PostgreSQL, zapisovať okrajové funkcie a nastaviť autentifikáciu pre svojich používateľov.