Kā augšupielādēt attēlus Supabase krātuves spainī no lietotnes Next.js

Kā augšupielādēt attēlus Supabase krātuves spainī no lietotnes Next.js
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.



DIENAS VIDEO MAKEUSEOF

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.





iestatiet gifus kā fonu Windows 10

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 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 install @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.

 import { createClient } from '@supabase/supabase-js' 
 
export const supabase = createClient('<project_url>', '<your-anon-key>')

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="your_project_url" 
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

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

 export const 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

Iekšā lietotnes Next.js mapi 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.

 "use client"; 
import { useState } from "react"; 
 
export default function Page() { 
  const [file, setfile] = useState([]); 
 
  const handleSubmit = async (e) => { 
    e.preventDefault(); 
    // upload image 
  }; 
 
  const handleFileSelected = (e) => { 
    setfile(e.target.files[0]); 
  }; 
 
  return ( 
    <form onSubmit={handleSubmit}> 
      <input type="file" name="image" onChange={handleFileSelected} /> 
      <button type="submit">Upload image</button> 
    </form> 
  ); 
}

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.

 const handleSubmit = async (e) => { 
    e.preventDefault(); 
    const filename = `${uuidv4()}-${file.name}`; 
 
    const { data, error } = await supabase.storage 
      .from("images") 
      .upload(filename, file, { 
        cacheControl: "3600", 
        upsert: false, 
      }); 
 
    const filepath = data.path; 
    // save filepath in database 
  };

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.

kā restartēt Windows Explorer 10

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 install uuid

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

 import { v4 as uuidv4 } from "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ļā.

failu pārsūtīšana no android uz datoru 
 import { supabase } from "@/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.

Apkalpošana jūsu pieteikumā

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:

 const filepath = "path_to_file_in_buckey" 
 
const { data } = supabase 
  .storage 
  .from('images') 
  .getPublicUrl(`${filepath}`)

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

 const filepath = `${bucket_url}/${filepath}`

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

 <Image src={filepath} alt="" width={200} height={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.