Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Saugoti vaizdus duomenų bazėje paprastai nerekomenduojama. Tai gali greitai pabrangti dėl reikalingos atminties ir apdorojimo galios. Geriau naudoti ekonomišką ir keičiamo dydžio saugojimo paslaugą, pvz., Supabase saugyklą.

Toliau sužinosite, kaip įkelti vaizdus į saugyklos talpyklą naudojant „Supabase JavaScript“ kliento biblioteką ir kaip pateikti vaizdus „Next.js“ programoje.

Supabase projekto kūrimas

Jei dar neturite Next.js programos, vadovaukitės oficialiais nurodymais Next.js darbo pradžios vadovas norėdami sukurti savo programą.

Kai tai padarysite, atlikite šiuos veiksmus, kad sukurtumėte Supabase duomenų bazę:

  1. Eikite į „Supabase“ svetainę ir susikurkite naują paskyrą. Jei jau turite paskyrą, prisijunkite.
  2. Supabase prietaisų skydelyje spustelėkite Sukurkite naują projektą mygtuką.
  3. Suteikite savo projektui pavadinimą ir spustelėkite
    instagram viewer
    Sukurti projektą mygtuką. Kai „Supabase“ sukurs projektą, jis nukreips jus į projekto prietaisų skydelį

Sukūrę projektą, sukurkite saugojimo kibirą.

Supabase saugyklos kūrimas

Saugojimo kibiras leidžia saugoti medijos failus, pvz., vaizdus ir vaizdo įrašus. Supabase galite sukurti saugyklos segmentą prietaisų skydelyje arba naudoti kliento biblioteką.

Norėdami naudoti prietaisų skydelį, atlikite šiuos veiksmus:

  1. Eikite į Supabase saugykla puslapis prietaisų skydelyje.
  2. Spustelėkite Naujas kibiras ir įveskite kibiro pavadinimą. Galite pavadinti jį vaizdais, nes jame saugosite vaizdus.
  3. Spustelėkite Sukurti kibirą.

Tada programoje nustatysite „Supabase“ klientą, kad galėtumėte sąveikauti su segmentu.

Supabase kliento nustatymas

Pradėkite diegdami supabase-js kliento biblioteką per terminalą:

npm įdiegti @supabase/supabase-js

Tada sukurkite naują aplanką pavadinimu lib savo programos šaknyje arba aplanke src, jei jį naudojate. Šiame aplanke pridėkite naują failą pavadinimu supabase.js ir naudokite šį kodą „Supabase“ klientui inicijuoti.

importuoti { CreateClient } iš„@supabase/supabase-js“
eksportuotikonst supabase = CreateClient('', '')

Pakeiskite projekto URL ir anon raktą savo informacija, kurią galite rasti Supabase projekto nustatymai. Išsamią informaciją galite nukopijuoti į .env failą ir nurodyti jas iš ten.

SUPABASE_PROJECT_URL="jūsų_projekto_url"
SUPABASE_PROJECT_ANON_KEY="jūsų_projekto_anon_raktas"

Dabar supabase.js turėtumėte turėti:

eksportuotikonst supabase = CreateClient(
 procesas.aplink. SUPABASE_PROJECT_URL,
 procesas.aplink. SUPABASE_ANON_KEY
);

Kai tai padarysite, sukurkite formą, kuri priims vaizdus.

Formos, kuri priima vaizdus, ​​kūrimas

Viduje Programos Next.js aplanką savo programos, sukurkite poaplankį pavadinimu įkelti ir pridėkite naują failą pavadinimu page.js. Taip bus sukurtas naujas puslapis, pasiekiamas /upload maršrute. Jei naudojate Next.js 12, sukurkite upload.js puslapių aplanką.

Įkėlimo puslapyje pridėkite šį kodą, kad sukurtumėte formą.

"naudoti klientą";
importuoti { useState } iš"reaguoti";
eksportuotinumatytasfunkcijaPuslapis() {
konst [failas, rinkmena] = useState([]);


konst rankenaPateikti = async (e) => {
 e.preventDefault();
// įkelti paveikslėlį
 };


konst handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
grąžinti (


"failas" vardas ="vaizdas" onChange={handleFileSelected} />

Kai pasirenkate failą ir spustelėsite mygtuką Pateikti, forma turėtų iškviesti HandelSubmit funkciją. Naudodami šią funkciją įkelsite vaizdą.

Didelėse formose su keliais laukais tai gali būti lengviau naudokite formų biblioteką, pvz., formik tvarkyti patvirtinimą ir pateikimą.

Vaizdo failo įkėlimas į „Supabase“ saugyklos kibirą

Funkcijoje HandelSubmit naudokite Supabase klientą, kad įkeltumėte vaizdą, pridėdami toliau esantį kodą.

konst rankenaPateikti = async (e) => {
 e.preventDefault();
konst failo pavadinimas = `${uuidv4()}-${failo.vardas}`;
konst { duomenys, klaida } = laukti supabase.saugykla
 .from ("vaizdai")
 .upload (failo pavadinimas, failas, {
 cacheControl: "3600",
 pakelti: klaidinga,
 });
konst failo kelias = data.path;
// išsaugoti failo kelią duomenų bazėje
 };

Naudodami šią funkciją sukuriate unikalų failo pavadinimą, sujungdami failo pavadinimą ir UUID, sugeneruotą uuid npm paketo. Tai rekomenduojama norint neperrašyti failų, kurie turi tą patį pavadinimą.

Turėsite įdiegti uuid paketą naudodami npm, todėl nukopijuokite ir paleiskite toliau pateiktą komandą terminale.

npm įdiegti uuid

Tada įkėlimo puslapio viršuje importuokite uuid 4 versiją.

importuoti { v4 kaip uuidv4 } iš"uuid";

Jei nenorite naudoti uuid paketo, yra keletas kitų metodai, kuriuos galite naudoti unikaliems ID generuoti.

Tada naudokite supabase klientą, kad įkeltumėte failą į saugojimo segmentą, vadinamą „vaizdais“. Nepamirškite importuoti supabazės kliento failo viršuje.

importuoti { supabase } iš"@/lib/supabase";

Atkreipkite dėmesį, kad einate keliu į vaizdą ir patį vaizdą. Šis kelias veikia taip pat, kaip ir failų sistemoje. Pavyzdžiui, jei išsaugotumėte vaizdą į aplanką, esantį kibiro, vadinamo viešuoju, kelią nurodytumėte kaip „/public/filename“.

Supabase grąžins objektą, kuriame yra duomenų ir klaidos objektas. Duomenų objekte yra ką tik įkelto vaizdo URL.

Kad ši įkėlimo funkcija veiktų, turite sukurti prieigos politiką, leidžiančią programai įterpti ir nuskaityti duomenis „Supabase“ saugyklos segmente, atlikdami šiuos veiksmus:

  1. Savo projekto prietaisų skydelyje spustelėkite Sandėliavimas skirtuką kairėje šoninėje juostoje.
  2. Pasirinkite saugyklos kibirą ir spustelėkite Prieiga skirtuką.
  3. Pagal Sezono politika, spustelėkite Nauja politika mygtuką.
  4. Pasirinkite Visiškam pritaikymui galimybė sukurti politiką nuo nulio.
  5. Viduje Pridėti politiką dialogo lange įveskite politikos pavadinimą (pvz., „Leisti įterpti ir skaityti“).
  6. Pasirinkite ĮDĖTI ir PASIRINKTI leidimai iš Leidžiamos operacijos išskleidžiamasis meniu.
  7. Spustelėkite Apžvalga mygtuką, kad peržiūrėtumėte politiką.
  8. Spustelėkite Sutaupyti mygtuką, kad pridėtumėte politiką.

Dabar turėtumėte galėti įkelti vaizdus nepakeldami prieigos klaidos.

Įkeltų vaizdų teikimas jūsų programoje

Norėdami pateikti vaizdą savo svetainėje, turite turėti viešą URL, kurį galite gauti dviem skirtingais būdais.

Supabase klientą galite naudoti taip:

konst failo kelias = „kelias į_failą_bukyje“
konst { duomenys } = supabazė
 .saugykla
 .from ('vaizdai')
 .getPublicUrl(`${filepath}`)

Arba galite rankiniu būdu susieti segmento URL su failo keliu:

konst failo kelias = `${bucket_url}/${filepath}`

Naudokite bet kurį jums patinkantį metodą. Kai turėsite failo kelią, galėsite jį naudoti Next.js vaizdo komponente, kaip nurodyta toliau:

"" plotis={200} aukštis={200}/>

Šis kodas parodys vaizdą jūsų svetainėje.

Patikimų programų kūrimas naudojant Supabase

Naudodami šį kodą galite priimti failą iš vartotojo naudodami formą ir įkelti jį į Supabase saugyklą. Tada galite gauti tą vaizdą ir pateikti jį savo svetainėje.

Be vaizdų saugojimo, „Supabase“ turi ir kitų funkcijų. Galite sukurti PostgreSQL duomenų bazę, rašyti kraštines funkcijas ir nustatyti naudotojų autentifikavimą.