I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

La memorizzazione delle immagini in un database è generalmente sconsigliata. Farlo può diventare rapidamente costoso a causa della quantità di storage e della potenza di elaborazione richiesta. L'utilizzo di un servizio di archiviazione conveniente e scalabile come l'archiviazione Supabase è migliore.

Di seguito imparerai come caricare le immagini in un bucket di archiviazione utilizzando la libreria client JavaScript di Supabase e come servire le immagini in un'applicazione Next.js.

Creazione di un progetto Supabase

Se non hai già un'applicazione Next.js pronta, segui il funzionario Guida introduttiva di Next.js per creare la tua applicazione.

Dopo averlo fatto, segui questi passaggi per creare un database Supabase:

  1. Vai al sito web di Supabase e crea un nuovo account. Se hai già un account, accedi.
  2. Dalla dashboard di Supabase, fai clic su Crea un nuovo progetto pulsante.
    3. instagram viewer
  3. Assegna un nome al tuo progetto e fai clic su Crea progetto pulsante. Una volta che Supabase crea il progetto, ti reindirizzerà alla dashboard del progetto

Dopo aver creato il progetto, crea un bucket di archiviazione.

Creazione di un bucket di archiviazione Supabase

Un bucket di archiviazione consente di archiviare file multimediali come immagini e video. In Supabase, puoi creare un bucket di archiviazione sulla dashboard o utilizzare la libreria client.

Per utilizzare la dashboard, procedi nel seguente modo:

  1. Vai al Archiviazione Supabase pagina nel Dashboard.
  2. Clic Nuovo Secchio e inserisci un nome per il bucket. Puoi nominarlo immagini poiché memorizzerai le immagini al suo interno.
  3. Clic Crea secchio.

Successivamente, configurerai un client Supabase nella tua app per interagire con il bucket.

Configurazione del client Supabase

Inizia installando la libreria client supabase-js tramite il terminale:

npm install @supabase/supabase-js

Quindi crea una nuova cartella denominata lib nella radice della tua applicazione o nella cartella src se la stai utilizzando. In questa cartella, aggiungi un nuovo file denominato supabase.js e utilizzare il seguente codice per inizializzare il client Supabase.

importare { creaCliente } da'@supabase/supabase-js'
esportarecost supabase = creaCliente('', '')

Sostituisci l'URL del progetto e la chiave anon con i tuoi dettagli che puoi trovare nel file Impostazioni del progetto Supabase. Puoi copiare i dettagli nel file .env e farvi riferimento da lì.

SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Ora, in supabase.js, dovresti avere:

esportarecost supabase = creaCliente(
 processo.env. SUPABASE_PROJECT_URL,
 processo.env. SUPABASE_ANON_KEY
);

Dopo averlo fatto, crea un modulo che accetterà le immagini.

Creazione di un modulo che accetta immagini

Dentro la cartella dell'app Next.js dell'applicazione, creare una sottocartella denominata caricamento e aggiungi un nuovo file chiamato pagina.js. Questo creerà una nuova pagina disponibile nel percorso /upload. Se utilizzi Next.js 12, crea upload.js nel file pagine cartella.

Nella pagina di caricamento, aggiungi il seguente codice per creare il modulo.

"usa client";
importare { usaStato } da"reagire";
esportarepredefinitofunzionePagina() {
cost [file, setfile] = useState([]);


cost handleSubmit = asincrono (e) => {
 e.preventDefault();
// carica immagine
 };


cost handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
ritorno (


"file" nome="Immagine" onChange={handleFileSelected} />

Quando si seleziona un file e si fa clic sul pulsante di invio, il modulo dovrebbe chiamare la funzione handleSubmit. È in questa funzione che caricherai l'immagine.

Per moduli di grandi dimensioni con più campi, può essere più semplice usa una libreria di moduli come formik per gestire la convalida e l'invio.

Caricamento di un file immagine in un bucket di archiviazione Supabase

Nella funzione handleSubmit, utilizza il client Supabase per caricare l'immagine aggiungendo il codice seguente.

cost handleSubmit = asincrono (e) => {
 e.preventDefault();
cost nome file = `${uuidv4()}-${nome.file}`;
cost { dati, errore } = aspetta supabase.storage
 .da("immagini")
 .upload (nome file, file, {
 cacheControl: "3600",
 upsert: falso,
 });
cost filepath = data.path;
// salva il percorso del file nel database
 };

In questa funzione, stai creando un nome file univoco concatenando il nome del file e un UUID generato dal pacchetto uuid npm. Questo è consigliato per evitare di sovrascrivere file che condividono lo stesso nome.

Dovrai installare il pacchetto uuid tramite npm, quindi copia ed esegui il comando seguente nel terminale.

uuid di installazione npm

Quindi, nella parte superiore della pagina di caricamento, importa la versione 4 di uuid.

importare {v4 COME uuidv4 } da"uuido";

Se non vuoi usare il pacchetto uuid, ce ne sono altri metodi che puoi utilizzare per generare ID univoci.

Successivamente, utilizza il client supabase per caricare il file nel bucket di archiviazione chiamato "immagini". Ricorda di importare il client supabase nella parte superiore del file.

importare { supbase } da"@/lib/supabase";

Nota che stai passando il percorso all'immagine e l'immagine stessa. Questo percorso funziona come nel file system. Ad esempio, se stavi salvando l'immagine in una cartella nel bucket denominata public, dovresti specificare il percorso come "/public/filename".

Supabase restituirà un oggetto contenente i dati e l'oggetto errore. L'oggetto dati contiene l'URL dell'immagine appena caricata.

Affinché questa funzione di caricamento funzioni, devi creare una policy di accesso che consenta alla tua applicazione di inserire e leggere i dati in un bucket di archiviazione Supabase seguendo questi passaggi:

  1. Nella dashboard del progetto, fai clic su Magazzinaggio scheda sulla barra laterale di sinistra.
  2. Seleziona il tuo bucket di archiviazione e fai clic su Accesso scheda.
  3. Sotto Politiche del secchio, clicca il Nuova politica pulsante.
  4. Seleziona il Per una personalizzazione completa opzione per creare una politica da zero.
  5. Nel Aggiungi criterio finestra di dialogo, inserisci un nome per la tua politica (ad es. "Consenti inserimento e lettura").
  6. Selezionare INSERIRE E SELEZIONARE autorizzazioni dal Operazioni consentite menu a discesa.
  7. Clicca il Revisione pulsante per rivedere le politiche.
  8. Clicca il Salva pulsante per aggiungere la politica.

Ora dovresti essere in grado di caricare immagini senza generare un errore di accesso.

Servire le immagini caricate nella tua applicazione

Per pubblicare l'immagine sul tuo sito, hai bisogno di un URL pubblico, che puoi recuperare in due modi diversi.

Puoi utilizzare il client Supabase in questo modo:

cost percorso file = "percorso_al_file_in_buckey"
cost { dati } = supabase
 .magazzinaggio
 .da('immagini')
 .getUrlPubblico(`${percorsofile}`)

Oppure puoi concatenare manualmente l'URL del bucket con il percorso del file:

cost percorso file = `${url_bucket}/${percorsofile}`

Usa il metodo che preferisci. Una volta che hai il percorso del file, puoi usarlo nel componente immagine Next.js in questo modo:

"" larghezza={200} altezza={200}/>

Questo codice visualizzerà l'immagine sul tuo sito.

Creazione di applicazioni robuste con Supabase

Utilizzando questo codice, puoi accettare un file da un utente tramite un modulo e caricarlo nello spazio di archiviazione di Supabase. Puoi quindi recuperare quell'immagine e pubblicarla sul tuo sito.

Oltre a memorizzare le immagini, Supabase ha altre funzionalità. Puoi creare un database PostgreSQL, scrivere funzioni edge e impostare l'autenticazione per i tuoi utenti.