Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A képek adatbázisban való tárolása általában nem ajánlott. Ez gyorsan költségessé válhat a szükséges tárolási és feldolgozási teljesítmény miatt. A költséghatékony és méretezhető tárolási szolgáltatás, például a Supabase tárhely használata jobb.

Az alábbiakban megtudhatja, hogyan tölthet fel képeket egy tárhelyre a Supabase JavaScript-ügyfélkönyvtár segítségével, és hogyan szolgálhatja ki a képeket egy Next.js alkalmazásban.

Supabase projekt létrehozása

Ha még nincs kész Next.js alkalmazás, kövesse a hivatalos utasításokat Next.js kezdő lépések útmutató az alkalmazás létrehozásához.

Ha ezt megtette, kövesse az alábbi lépéseket egy Supabase adatbázis létrehozásához:

  1. Keresse meg a Supabase webhelyet, és hozzon létre új fiókot. Ha már van fiókja, jelentkezzen be.
  2. A Supabase irányítópultján kattintson a Hozzon létre egy új projektet gomb.
  3. Adjon nevet a projektnek, és kattintson a gombra
    instagram viewer
    Projekt létrehozása gomb. Miután a Supabase létrehozta a projektet, átirányítja Önt a projekt irányítópultjára

A projekt létrehozása után hozzon létre egy tárhelyet.

Supabase Storage Bucket létrehozása

A tárolókanál lehetővé teszi médiafájlok, például képek és videók tárolását. A Supabase-ben létrehozhat egy tárhelyet az irányítópulton, vagy használhatja az ügyfélkönyvtárat.

Az irányítópult használatához kövesse az alábbi lépéseket:

  1. Menj a Supabase tárhely oldalt az Irányítópulton.
  2. Kattintson Új vödör és adjon meg egy nevet a vödörnek. Nevezheti képeknek, mivel képeket fog tárolni benne.
  3. Kattintson Vödör létrehozása.

Ezután be kell állítania egy Supabase-klienst az alkalmazásban, hogy interakcióba lépjen a tárolóval.

A Supabase kliens beállítása

Kezdje a supabase-js ügyfélkönyvtár telepítésével a terminálon keresztül:

npm install @supabase/supabase-js

Ezután hozzon létre egy új lib nevű mappát az alkalmazás gyökerében vagy az src mappában, ha használja. Ebben a mappában adjon hozzá egy új nevű fájlt supabase.js és használja a következő kódot a Supabase kliens inicializálásához.

import {Client létrehozása } tól től"@supabase/supabase-js"
exportconst supabase = createClient('', '')

Cserélje ki a projekt URL-címét és az anon kulcsot saját adataira, amelyeket megtalálhat a Supabase projekt beállításai. A részleteket az .env fájlba másolhatja, és onnan hivatkozhat rájuk.

SUPABASE_PROJECT_URL="a_projekt_url"
SUPABASE_PROJECT_ANON_KEY="a_projekt_anon_kulcsa"

Most a supabase.js-ben a következőknek kell lennie:

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

Ha ezt megtette, hozzon létre egy űrlapot, amely elfogadja a képeket.

Képeket elfogadó űrlap létrehozása

Belül a Next.js alkalmazás mappájába Az alkalmazásban hozzon létre egy almappát feltölteni és adjunk hozzá egy új nevű fájlt page.js. Ezzel egy új oldal jön létre a /upload útvonalon. Ha a Next.js 12-t használja, hozza létre az upload.js fájlt a oldalakat mappát.

A feltöltési oldalon adja hozzá a következő kódot az űrlap létrehozásához.

"kliens használata";
import { useState } tól től"reagál";
exportalapértelmezettfunkcióoldal() {
const [file, setfile] = useState([]);


const handleSubmit = async (e) => {
 e.preventDefault();
// kép feltöltése
 };


const handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
Visszatérés (


"fájl" név="kép" onChange={handleFileSelected} />

Amikor kiválaszt egy fájlt, és rákattint a küldés gombra, az űrlapnak meg kell hívnia a handleSubmit függvényt. Ebben a funkcióban töltheti fel a képet.

A több mezőt tartalmazó nagy űrlapok esetében egyszerűbb lehet használjon űrlapkönyvtárat, mint például a formik az érvényesítés és a benyújtás kezelésére.

Képfájl feltöltése egy Supabase Storage Bucket-be

A handleSubmit függvényben használja a Supabase klienst a kép feltöltéséhez az alábbi kód hozzáadásával.

const handleSubmit = async (e) => {
 e.preventDefault();
const fájlnév = `${uuidv4()}-${fájl.név}`;
const { adat, hiba } = várja supabase.tárhely
 .tól től("képek")
 .upload (fájlnév, fájl, {
 cacheControl: "3600",
 felhúzás: hamis,
 });
const filepath = adat.elérési út;
// fájlútvonal mentése az adatbázisba
 };

Ebben a függvényben egyedi fájlnevet hoz létre a fájlnév és az uuid npm csomag által generált UUID összefűzésével. Ez az azonos nevű fájlok felülírásának elkerülése érdekében ajánlott.

Az uuid csomagot npm-en keresztül kell telepítenie, ezért másolja ki és futtassa az alábbi parancsot a terminálon.

npm install uuid

Ezután a feltöltési oldal tetején importálja az uuid 4-es verzióját.

import { v4 mint uuidv4 } tól től"uuid";

Ha nem akarja használni az uuid csomagot, van néhány másik módszerek, amelyek segítségével egyedi azonosítókat hozhat létre.

Ezután a supabase kliens segítségével töltse fel a fájlt az „images” nevű tárolótárolóba. Ne felejtse el importálni a supabase klienst a fájl tetején.

import { supabase } tól től"@/lib/supabase";

Vegye figyelembe, hogy átadja a képhez vezető utat és magát a képet. Ez az elérési út ugyanúgy működik, mint a fájlrendszerben. Például, ha a képet a nyilvános nevű vödörben lévő mappába menti, akkor az elérési utat „/nyilvános/fájlnév”-ként kell megadnia.

A Supabase egy adat- és hibaobjektumot tartalmazó objektumot ad vissza. Az adatobjektum tartalmazza az imént feltöltött kép URL-jét.

Ahhoz, hogy ez a feltöltési funkció működjön, létre kell hoznia egy hozzáférési szabályzatot, amely lehetővé teszi az alkalmazás számára, hogy adatokat szúrjon be és olvasson be egy Supabase tárolótárolóba az alábbi lépések végrehajtásával:

  1. A projekt irányítópultján kattintson a Tárolás fület a bal oldali sávon.
  2. Válassza ki a tárolóedényt, és kattintson a Hozzáférés lapon.
  3. Alatt Vödör irányelvei, kattints a Új politika gomb.
  4. Válaszd ki a A teljes testreszabáshoz lehetőség házirend létrehozására a semmiből.
  5. Ban,-ben Szabályzat hozzáadása párbeszédpanelen adja meg a házirend nevét (pl. "Beszúrás és olvasás engedélyezése").
  6. Válassza ki BESZÁLLÍTÁS és KIVÁLASZTÁS engedélyeket a Engedélyezett műveletek legördülő menü.
  7. Kattints a Felülvizsgálat gombot az irányelvek megtekintéséhez.
  8. Kattints a Megment gombot a házirend hozzáadásához.

Most már képesnek kell lennie a képek feltöltésére anélkül, hogy hozzáférési hiba lépne fel.

A feltöltött képek kiszolgálása az alkalmazásban

A kép webhelyén való megjelenítéséhez nyilvános URL-re van szüksége, amelyet két különböző módon kérhet le.

A Supabase klienst a következőképpen használhatja:

const filepath = "elérési_út_fájlhoz_buckeyban"
const { adat } = albázis
 .tárolás
 .tól től('képek')
 .getPublicUrl(`${filepath}`)

Vagy manuálisan is összefűzheti a vödör URL-jét a fájl elérési útjával:

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

Használja a kívánt módszert. Miután megvan a fájl elérési útja, használhatja azt a Next.js képösszetevőben, így:

"" szélesség={200} magasság={200}/>

Ez a kód megjeleníti a képet a webhelyén.

Robusztus alkalmazások létrehozása a Supabase segítségével

Ezzel a kóddal elfogadhat egy fájlt a felhasználótól egy űrlapon, és feltöltheti a Supabase tárhelyére. Ezután lekérheti a képet, és megjelenítheti a webhelyén.

A képek tárolásán kívül a Supabase más funkciókkal is rendelkezik. Létrehozhat egy PostgreSQL adatbázist, írhat élfüggvényeket, és beállíthat hitelesítést a felhasználók számára.