Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Stocarea imaginilor într-o bază de date nu este, în general, recomandată. Acest lucru poate deveni rapid costisitor din cauza cantității de stocare și a puterii de procesare necesare. Utilizarea unui serviciu de stocare rentabil și scalabil, cum ar fi stocarea Supabase, este mai bună.

Mai jos veți învăța cum să încărcați imagini într-o găleată de stocare folosind biblioteca client Supabase JavaScript și cum să difuzați imaginile într-o aplicație Next.js.

Crearea unui proiect Supabase

Dacă nu aveți deja pregătită o aplicație Next.js, urmați oficialul Ghid introductiv Next.js pentru a vă crea aplicația.

După ce ați făcut asta, urmați acești pași pentru a crea o bază de date Supabase:

  1. Navigați pe site-ul Supabase și creați un cont nou. Dacă aveți deja un cont, conectați-vă.
  2. Din tabloul de bord Supabase, faceți clic pe Creați un nou proiect buton.
    3. instagram viewer
  3. Dați un nume proiectului și faceți clic pe Creați proiect buton. Odată ce Supabase creează proiectul, vă va redirecționa către tabloul de bord al proiectului

După crearea proiectului, creați o găleată de stocare.

Crearea unei găleți de stocare Supabase

O găleată de stocare vă permite să stocați fișiere media, cum ar fi imagini și videoclipuri. În Supabase, puteți crea o găleată de stocare pe tabloul de bord sau puteți utiliza biblioteca client.

Pentru a utiliza tabloul de bord, urmați acești pași:

  1. Du-te la Supabase Stocare pagina din Tabloul de bord.
  2. Clic Găleată nouă și introduceți un nume pentru găleată. Puteți să îi denumiți imagini, deoarece veți stoca imagini în el.
  3. Clic Creați o găleată.

Apoi, veți configura un client Supabase în aplicația dvs. pentru a interacționa cu găleata.

Configurarea clientului Supabase

Începeți prin a instala biblioteca client supabase-js prin intermediul terminalului:

npm install @supabase/supabase-js

Apoi creați un folder nou numit lib la rădăcina aplicației dvs. sau în folderul src dacă îl utilizați. În acest folder, adăugați un fișier nou numit supabase.js și utilizați următorul cod pentru a inițializa clientul Supabase.

import { createClient } din„@supabase/supabase-js”
exportconst supabase = createClient('', '')

Înlocuiți adresa URL a proiectului și cheia anon cu propriile detalii pe care le puteți găsi în Setările proiectului Supabase. Puteți copia detaliile în fișierul .env și le puteți referi de acolo.

SUPABASE_PROJECT_URL="URL_proiectului_dvs."
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Acum, în supabase.js, ar trebui să aveți:

exportconst supabase = createClient(
 proces.env. SUPABASE_PROJECT_URL,
 proces.env. SUPABASE_ANON_KEY
);

După ce ați făcut asta, creați un formular care va accepta imaginile.

Crearea unui formular care acceptă imagini

Interior folderul aplicației Next.js al aplicației dvs., creați un subdosar numit încărcați și adăugați un fișier nou numit page.js. Aceasta va crea o pagină nouă disponibilă la ruta /upload. Dacă utilizați Next.js 12, creați upload.js în pagini pliant.

În pagina de încărcare, adăugați următorul cod pentru a crea formularul.

"utilizați clientul";
import { useState } din"reacţiona";
exportMod implicitfuncţiePagină() {
const [fișier, setfile] = useState([]);


const handleSubmit = asincron (e) => {
 e.preventDefault();
// incarca imaginea
 };


const handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
întoarcere (


"fişier" nume="imagine" onChange={handleFileSelected} />

Când selectați un fișier și faceți clic pe butonul de trimitere, formularul ar trebui să apeleze funcția handleSubmit. În această funcție vei încărca imaginea.

Pentru formularele mari cu mai multe câmpuri, poate fi mai ușor utilizați o bibliotecă de formulare precum formik pentru a gestiona validarea și transmiterea.

Încărcarea unui fișier imagine într-o găleată de stocare Supabase

În funcția handleSubmit, utilizați clientul Supabase pentru a încărca imaginea adăugând codul de mai jos.

const handleSubmit = asincron (e) => {
 e.preventDefault();
const nume de fișier = `${uuidv4()}-${file.name}`;
const { date, error } = așteaptă supabaza.stocare
 .din("imagini")
 .încărcare (nume fișier, fișier, {
 cacheControl: "3600",
 supara: fals,
 });
const filepath = data.path;
// salvează calea fișierului în baza de date
 };

În această funcție, creați un nume de fișier unic prin concatenarea numelui fișierului și a unui UUID generat de pachetul uuid npm. Acest lucru este recomandat pentru a evita suprascrierea fișierelor care au același nume.

Va trebui să instalați pachetul uuid prin npm, așa că copiați și rulați comanda de mai jos în terminal.

npm install uuid

Apoi, în partea de sus a paginii de încărcare, importați versiunea 4 a uuid.

import { v4 la fel de uuidv4 } din"uuid";

Dacă nu doriți să utilizați pachetul uuid, există și alții metode pe care le puteți utiliza pentru a genera ID-uri unice.

Apoi, utilizați clientul supabase pentru a încărca fișierul în compartimentul de stocare numit „imagini”. Nu uitați să importați clientul supabase în partea de sus a fișierului.

import { supabaza } din„@/lib/supabase”;

Rețineți că treceți calea către imagine și către imaginea în sine. Această cale funcționează la fel ca și în sistemul de fișiere. De exemplu, dacă ați salva imaginea într-un folder din găleată numit public, ați specifica calea ca „/public/nume fișier”.

Supabase va returna un obiect care conține datele și obiectul de eroare. Obiectul de date conține adresa URL a imaginii pe care tocmai ați încărcat-o.

Pentru ca această funcție de încărcare să funcționeze, trebuie să creați o politică de acces care să permită aplicației dvs. să insereze și să citească date într-o găleată de stocare Supabase, urmând acești pași:

  1. Pe tabloul de bord al proiectului, faceți clic pe Depozitare fila din bara laterală din stânga.
  2. Selectați găleata de stocare și faceți clic pe Acces fila.
  3. Sub Politici de grup, apasă pe Politică nouă buton.
  4. Selectează Pentru personalizare completă opțiunea de a crea o politică de la zero.
  5. În Adăugați o politică dialog, introduceți un nume pentru politica dvs. (de exemplu, „Permiteți inserarea și citirea”).
  6. Selectați INTRODUCE și SELECTAȚI permisiunile de la Operațiuni permise meniu derulant.
  7. Apasă pe Revizuire butonul pentru a examina politicile.
  8. Apasă pe Salvați butonul pentru a adăuga politica.

Acum ar trebui să puteți încărca imagini fără a genera o eroare de acces.

Servirea imaginilor încărcate în aplicația dvs

Pentru a difuza imaginea pe site-ul dvs., aveți nevoie de o adresă URL publică, pe care o puteți prelua în două moduri diferite.

Puteți utiliza clientul Supabase astfel:

const calea fișierului = „cale_la_fișier_în_buckey”
const { data } = supabaza
 .depozitare
 .din(„imagini”)
 .getPublicUrl(`${filepath}`)

Sau puteți concatena manual adresa URL a compartimentului cu calea fișierului:

const calea fișierului = `${bucket_url}/${filepath}`

Utilizați orice metodă preferați. Odată ce aveți calea fișierului, o puteți utiliza în componenta imagine Next.js astfel:

"" lățime={200} înălțime={200}/>

Acest cod va afișa imaginea pe site-ul dvs.

Crearea de aplicații robuste cu Supabase

Folosind acest cod, puteți accepta un fișier de la un utilizator printr-un formular și îl puteți încărca în stocarea Supabase. Apoi puteți prelua acea imagine și o puteți difuza pe site-ul dvs.

Pe lângă stocarea imaginilor, Supabase are și alte funcționalități. Puteți crea o bază de date PostgreSQL, puteți scrie funcții edge și puteți configura autentificarea pentru utilizatorii dvs.