Hur man laddar upp bilder till en Supabase-lagringshink från en Next.js-app

Hur man laddar upp bilder till en Supabase-lagringshink från en Next.js-app
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Att lagra bilder i en databas rekommenderas i allmänhet inte. Att göra det kan snabbt bli dyrt på grund av mängden lagring och processorkraft som krävs. Att använda en kostnadseffektiv och skalbar lagringstjänst som Supabase-lagring är bättre.





Nedan får du lära dig hur du laddar upp bilder till en lagringshink med Supabase JavaScript-klientbibliotek och hur du servar bilderna i en Next.js-applikation.



MAKEUSE AV DAGENS VIDEO

Skapa ett Supabase-projekt

Om du inte redan har en Next.js-applikation redo, följ tjänstemannen Guide för att komma igång med Next.js för att skapa din applikation.





vad betyder i appköp

När du har gjort det, följ dessa steg för att skapa en Supabase-databas:

  1. Navigera till Supabases webbplats och skapa ett nytt konto. Om du redan har ett konto, logga in.
  2. Från Supabase-instrumentpanelen klickar du på Skapa ett nytt projekt knapp.
  3. Ge ditt projekt ett namn och klicka på Skapa projekt knapp. När Supabase har skapat projektet kommer det att omdirigera dig till projektinstrumentpanelen

När du har skapat projektet skapar du en lagringshink.



Skapa en Supabase-lagringshink

En lagringshink låter dig lagra mediefiler som bilder och videor. I Supabase kan du skapa en lagringshink på instrumentpanelen eller använda klientbiblioteket.

Följ dessa steg för att använda instrumentpanelen:



  1. Gå till Supabase lagring sida i instrumentpanelen.
  2. Klick Ny hink och ange ett namn för hinken. Du kan namnge det bilder eftersom du kommer att lagra bilder i det.
  3. Klick Skapa hink .

Därefter kommer du att konfigurera en Supabase-klient i din app för att interagera med hinken.

Konfigurera Supabase-klienten

Börja med att installera supabase-js klientbibliotek via terminalen:



 npm install @supabase/supabase-js

Skapa sedan en ny mapp med namnet lib i roten av ditt program eller i src-mappen om du använder den. Lägg till en ny fil med namnet i den här mappen supabase.js och använd följande kod för att initiera Supabase-klienten.

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

Ersätt projektets URL och anon-nyckeln med dina egna detaljer som du kan hitta i Supabase-projektinställningar . Du kan kopiera detaljerna i .env-filen och referera till dem därifrån.

 SUPABASE_PROJECT_URL="your_project_url" 
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Nu, i supabase.js, bör du ha:

 export const supabase = createClient( 
  process.env.SUPABASE_PROJECT_URL, 
  process.env.SUPABASE_ANON_KEY 
);

När du har gjort det skapar du ett formulär som accepterar bilderna.

Skapa ett formulär som

Inuti mappen Next.js app i din ansökan skapar du en undermapp med namnet ladda upp och lägg till en ny fil med namnet page.js . Detta kommer att skapa en ny sida tillgänglig vid /upload-rutten. Om du använder Next.js 12, skapa upload.js i sidor mapp.

På uppladdningssidan lägger du till följande kod för att skapa formuläret.

 "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> 
  ); 
}

När du väljer en fil och klickar på knappen Skicka ska formuläret anropa handleSubmit-funktionen. Det är i den här funktionen som du laddar upp bilden.

För stora formulär med flera fält kan det vara lättare att använd ett formulärbibliotek som formik att hantera validering och inlämning.

Ladda upp en bildfil till en Supabase Storage Bucket

I handleSubmit-funktionen använder du Supabase-klienten för att ladda upp bilden genom att lägga till koden nedan.

 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 
  };

I den här funktionen skapar du ett unikt filnamn genom att sammanfoga filnamnet och ett UUID som genereras av paketet uuid npm. Detta rekommenderas för att undvika att skriva över filer som delar samma namn.

fire hd 10 google play 2018

Du måste installera uuid-paketet via npm så kopiera och kör kommandot nedan i terminalen.

 npm install uuid

Importera sedan version 4 av uuid högst upp på uppladdningssidan.

 import { v4 as uuidv4 } from "uuid";

Om du inte vill använda uuid-paketet finns det några andra metoder du kan använda för att generera unika ID .

Använd sedan supabase-klienten för att ladda upp filen till lagringshinken som kallas 'bilder'. Kom ihåg att importera supabase-klienten överst i din fil.

 import { supabase } from "@/lib/supabase";

Observera att du passerar vägen till bilden och själva bilden. Den här sökvägen fungerar på samma sätt som den gör i filsystemet. Om du till exempel sparade bilden i en mapp i hinken som heter public, skulle du ange sökvägen som '/public/filnamn'.

Supabase returnerar ett objekt som innehåller data- och felobjektet. Dataobjektet innehåller URL:en till bilden du just laddade upp.

hur man tittar på program med vänner online

För att den här uppladdningsfunktionen ska fungera måste du skapa en åtkomstpolicy som gör att din applikation kan infoga och läsa data i en Supabase-lagringshink genom att följa dessa steg:

  1. På din projektinstrumentpanel klickar du på Lagring fliken i det vänstra sidofältet.
  2. Välj din förvaringshink och klicka på Tillgång flik.
  3. Under Bucket policyer , Klicka på Ny policy knapp.
  4. Välj För fullständig anpassning möjlighet att skapa en policy från början.
  5. I den Lägg till policy anger du ett namn för din policy (t.ex. 'Tillåt infoga och läs').
  6. Välj FÖRA IN och VÄLJ tillstånd från Tillåtna operationer rullgardinsmenyn.
  7. Klicka på Recension för att granska policyerna.
  8. Klicka på Spara knappen för att lägga till policyn.

Du bör nu kunna ladda upp bilder utan att ett åtkomstfel visas.

Betjänar i din ansökan

För att visa bilden på din sida behöver du en offentlig URL, som du kan hämta på två olika sätt.

Du kan använda Supabase-klienten så här:

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

Eller så kan du manuellt sammanfoga bucket-URL med filsökvägen:

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

Använd vilken metod du föredrar. När du väl har filsökvägen kan du använda den i Next.js-bildkomponenten så här:

 <Image src={filepath} alt="" width={200} height={200}/>

Denna kod kommer att visa bilden på din webbplats.

Skapa robusta applikationer med Supabase

Med den här koden kan du acceptera en fil från en användare via ett formulär och ladda upp den till Supabase-lagring. Du kan sedan hämta den bilden och visa den på din webbplats.

Förutom att lagra bilder har Supabase andra funktioner. Du kan skapa en PostgreSQL-databas, skriva kantfunktioner och ställa in autentisering för dina användare.