Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Attēlu glabāšana datu bāzē parasti nav ieteicama. Tas var ātri kļūt dārgi, jo ir nepieciešams uzglabāšanas un apstrādes jaudas apjoms. Labāk ir izmantot rentablu un mērogojamu krātuves pakalpojumu, piemēram, Supabase krātuvi.

Tālāk uzzināsit, kā augšupielādēt attēlus krātuves spainī, izmantojot Supabase JavaScript klienta bibliotēku, un kā apkalpot attēlus lietojumprogrammā Next.js.

Supabase projekta izveide

Ja jums vēl nav gatava Next.js lietojumprogramma, sekojiet oficiālajai informācijai Next.js darba sākšanas rokasgrāmata lai izveidotu savu pieteikumu.

Kad tas ir izdarīts, veiciet šīs darbības, lai izveidotu Supabase datu bāzi:

  1. Dodieties uz Supabase vietni un izveidojiet jaunu kontu. Ja jums jau ir konts, piesakieties.
  2. Supabase informācijas panelī noklikšķiniet uz Izveidojiet jaunu projektu pogu.
  3. Piešķiriet savam projektam nosaukumu un noklikšķiniet uz
    instagram viewer
    Izveidot projektu pogu. Kad Supabase būs izveidojis projektu, tas jūs novirzīs uz projekta informācijas paneli

Pēc projekta izveides izveidojiet krātuves spaini.

Supabase krātuves kausa izveide

Krātuves spainis ļauj saglabāt multivides failus, piemēram, attēlus un videoklipus. Programmā Supabase informācijas panelī varat izveidot krātuves kopu vai izmantot klienta bibliotēku.

Lai izmantotu informācijas paneli, veiciet tālāk norādītās darbības.

  1. Dodieties uz Supabase krātuve lapu informācijas panelī.
  2. Klikšķis Jauns spainis un ievadiet kausa nosaukumu. Varat to nosaukt par attēliem, jo ​​tajā tiks saglabāti attēli.
  3. Klikšķis Izveidojiet spaini.

Pēc tam savā lietotnē iestatīsit Supabase klientu, lai mijiedarbotos ar segmentu.

Supabase klienta iestatīšana

Sāciet, instalējot supabase-js klienta bibliotēku, izmantojot termināli:

npm instalēt @supabase/supabase-js

Pēc tam izveidojiet jaunu mapi ar nosaukumu lib lietojumprogrammas saknē vai mapē src, ja to izmantojat. Šajā mapē pievienojiet jaunu failu ar nosaukumu supabase.js un izmantojiet šo kodu, lai inicializētu Supabase klientu.

imports { CreateClient } no'@supabase/supabase-js'
eksportētkonst supabase = createClient('', '')

Aizstājiet projekta URL un anon atslēgu ar savu informāciju, ko varat atrast Supabase projekta iestatījumi. Varat kopēt informāciju .env failā un atsaukties uz tiem no turienes.

SUPABASE_PROJECT_URL="jūsu_projekta_url"
SUPABASE_PROJECT_ANON_KEY="jūsu_projekta_anon_atslēga"

Tagad supabase.js jums vajadzētu būt:

eksportētkonst supabase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Kad tas ir izdarīts, izveidojiet veidlapu, kurā tiks pieņemti attēli.

Veidlapas izveide, kas pieņem attēlus

Iekšā lietotnes mape Next.js lietojumprogrammā izveidojiet apakšmapi ar nosaukumu augšupielādēt un pievienojiet jaunu failu ar nosaukumu page.js. Tādējādi tiks izveidota jauna lapa, kas pieejama maršrutā /upload. Ja izmantojat Next.js 12, izveidojiet upload.js failā lapas mapi.

Augšupielādes lapā pievienojiet šādu kodu, lai izveidotu veidlapu.

"izmantot klientu";
imports { useState } no"reaģēt";
eksportētnoklusējumafunkcijuLappuse() {
konst [fails, setfile] = useState([]);


konst HandSubmit = asinhrons (e) => {
 e.preventDefault();
// augšupielādēt attēlu
 };


konst handFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
atgriezties (


"fails" vārds ="attēls" onChange={handleFileSelected} />

Atlasot failu un noklikšķinot uz pogas Iesniegt, veidlapai ir jāizsauc funkcija handleSubmit. Izmantojot šo funkciju, jūs augšupielādēsit attēlu.

Lielām veidlapām ar vairākiem laukiem to var būt vieglāk izmantojiet veidlapu bibliotēku, piemēram, formik veikt apstiprināšanu un iesniegšanu.

Attēla faila augšupielāde Supabase krātuves spainī

Funkcijā handleSubmit izmantojiet Supabase klientu, lai augšupielādētu attēlu, pievienojot tālāk norādīto kodu.

konst HandSubmit = asinhrons (e) => {
 e.preventDefault();
konst faila nosaukums = `${uuidv4()}-${file.name}`;
konst {dati, kļūda} = gaidīt supabase.storage
 .from("attēli")
 .upload (faila nosaukums, fails, {
 cacheControl: "3600",
 izjaukt: viltus,
 });
konst filepath = data.path;
// saglabājiet faila ceļu datu bāzē
 };

Izmantojot šo funkciju, jūs izveidojat unikālu faila nosaukumu, savienojot faila nosaukumu un UUID, ko ģenerē pakotne uuid npm. Tas ir ieteicams, lai izvairītos no tādu failu pārrakstīšanas, kuriem ir vienāds nosaukums.

Jums būs jāinstalē uuid pakotne, izmantojot npm, tāpēc nokopējiet un palaidiet tālāk norādīto komandu terminālī.

npm instalēt uuid

Pēc tam augšupielādes lapas augšdaļā importējiet uuid 4. versiju.

imports { v4 kā uuidv4 } no"uuid";

Ja nevēlaties izmantot uuid pakotni, ir arī citas metodes, kuras varat izmantot unikālu ID ģenerēšanai.

Pēc tam izmantojiet supabase klientu, lai augšupielādētu failu krātuves segmentā ar nosaukumu “attēli”. Neaizmirstiet importēt supabase klientu faila augšdaļā.

imports { supabase } no"@/lib/supabase";

Ņemiet vērā, ka jūs ejat uz attēlu un pašu attēlu. Šis ceļš darbojas tāpat kā failu sistēmā. Piemēram, ja saglabātu attēlu mapē, kas atrodas kausā, ko sauc par publisku, ceļš jānorāda kā “/public/filename”.

Supabase atgriezīs objektu, kurā ir dati un kļūdas objekts. Datu objekts satur tikko augšupielādētā attēla URL.

Lai šī augšupielādes funkcija darbotos, jums ir jāizveido piekļuves politika, kas ļauj jūsu lietojumprogrammai ievietot un nolasīt datus Supabase krātuves segmentā, veicot šādas darbības:

  1. Projekta informācijas panelī noklikšķiniet uz Uzglabāšana cilne kreisajā sānjoslā.
  2. Izvēlieties savu krātuves spaini un noklikšķiniet uz Piekļuve cilne.
  3. Zem Grupas politikas, noklikšķiniet uz Jauna politika pogu.
  4. Izvēlieties Pilnīgai pielāgošanai iespēja izveidot politiku no nulles.
  5. Iekš Pievienot politiku dialoglodziņā ievadiet savas politikas nosaukumu (piemēram, "Atļaut ievietot un lasīt").
  6. Izvēlieties IEVIETOT un ATLASĪT atļaujas no Atļautās operācijas nolaižamā izvēlne.
  7. Noklikšķiniet uz Pārskats pogu, lai pārskatītu politikas.
  8. Noklikšķiniet uz Saglabāt pogu, lai pievienotu politiku.

Tagad jums vajadzētu būt iespējai augšupielādēt attēlus, neradot piekļuves kļūdu.

Augšupielādēto attēlu apkalpošana jūsu lietojumprogrammā

Lai rādītu attēlu savā vietnē, ir nepieciešams publisks URL, kuru varat izgūt divos dažādos veidos.

Jūs varat izmantot Supabase klientu šādi:

konst faila ceļš = "ceļš uz_failu_bukijā"
konst {dati} = apakšbāze
 .krātuve
 .from('attēli')
 .getPublicUrl(`${filepath}`)

Vai arī varat manuāli savienot segmenta URL ar faila ceļu:

konst faila ceļš = `${bucket_url}/${filepath}`

Izmantojiet jebkuru metodi, kuru vēlaties. Kad esat ieguvis faila ceļu, varat to izmantot Next.js attēla komponentā šādi:

"" platums={200} augstums={200}/>

Šis kods parādīs attēlu jūsu vietnē.

Izturīgu lietojumprogrammu izveide, izmantojot Supabase

Izmantojot šo kodu, varat pieņemt failu no lietotāja, izmantojot veidlapu, un augšupielādēt to Supabase krātuvē. Pēc tam varat izgūt šo attēlu un rādīt to savā vietnē.

Papildus attēlu glabāšanai Supabase ir arī citas funkcijas. Varat izveidot PostgreSQL datu bāzi, rakstīt malas funkcijas un iestatīt lietotāju autentifikāciju.