Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Przechowywanie obrazów w bazie danych generalnie nie jest zalecane. Takie postępowanie może szybko stać się kosztowne ze względu na wymaganą ilość pamięci masowej i mocy obliczeniowej. Korzystanie z opłacalnej i skalowalnej usługi przechowywania, takiej jak Supabase, jest lepsze.

Poniżej dowiesz się, jak przesyłać obrazy do zasobnika za pomocą biblioteki klienta Supabase JavaScript i jak wyświetlać obrazy w aplikacji Next.js.

Tworzenie projektu Supabase

Jeśli nie masz jeszcze gotowej aplikacji Next.js, podążaj za urzędnikiem Przewodnik dla początkujących z Next.js aby stworzyć swoją aplikację.

Gdy to zrobisz, wykonaj następujące kroki, aby utworzyć bazę danych Supabase:

  1. Przejdź do strony Supabase i utwórz nowe konto. Jeśli masz już konto, zaloguj się.
  2. Na pulpicie nawigacyjnym Supabase kliknij Utwórz nowy projekt przycisk.
  3. Nadaj projektowi nazwę i kliknij przycisk
    instagram viewer
    Utwórz projekt przycisk. Gdy Supabase utworzy projekt, przekieruje Cię do pulpitu nawigacyjnego projektu

Po utworzeniu projektu utwórz zasobnik do przechowywania.

Tworzenie zasobnika pamięci masowej Supabase

Kubeł do przechowywania umożliwia przechowywanie plików multimedialnych, takich jak obrazy i filmy. W Supabase możesz utworzyć zasobnik do przechowywania na pulpicie nawigacyjnym lub skorzystać z biblioteki klienta.

Aby skorzystać z pulpitu nawigacyjnego, wykonaj następujące kroki:

  1. Idź do Magazyn Supabase stronę w panelu.
  2. Kliknij Nowe wiadro i wprowadź nazwę zasobnika. Możesz nazwać go obrazami, ponieważ będziesz w nim przechowywać obrazy.
  3. Kliknij Utwórz wiadro.

Następnie skonfigurujesz klienta Supabase w swojej aplikacji do interakcji z zasobnikiem.

Konfigurowanie klienta Supabase

Rozpocznij od zainstalowania biblioteki klienta supabase-js za pośrednictwem terminala:

npm zainstaluj @supabase/supabase-js

Następnie utwórz nowy folder o nazwie lib w katalogu głównym aplikacji lub w folderze src, jeśli go używasz. W tym folderze dodaj nowy plik o nazwie supabase.js i użyj następującego kodu, aby zainicjować klienta Supabase.

import { utwórz klienta } z'@supabase/supabase-js'
eksportkonst supabase = utwórzKlienta('', '')

Zastąp adres URL projektu i klucz anon własnymi danymi, które można znaleźć w pliku Ustawienia projektu Supabase. Możesz skopiować szczegóły z pliku .env i stamtąd się do nich odwoływać.

SUPABASE_PROJECT_URL="adres_url_twojego projektu"
SUPABASE_PROJECT_ANON_KEY="twój_projekt_anon_klucz"

Teraz w supabase.js powinieneś mieć:

eksportkonst supabase = utwórzKlienta(
 proces.env. SUPABASE_PROJECT_URL,
 proces.env. SUPABASE_ANON_KEY
);

Gdy to zrobisz, utwórz formularz, który zaakceptuje obrazy.

Tworzenie formularza akceptującego obrazy

Wewnątrz folder aplikacji Next.js swojej aplikacji, utwórz podfolder o nazwie wgrywać i dodaj nowy plik o nazwie strona.js. Spowoduje to utworzenie nowej strony dostępnej na trasie /upload. Jeśli używasz Next.js 12, utwórz upload.js w strony teczka.

Na stronie przesyłania dodaj następujący kod, aby utworzyć formularz.

„użyj klienta”;
import { stan użycia } z"reagować";
eksportdomyślnyfunkcjonowaćStrona() {
konst [plik, ustaw plik] = useState([]);


konst uchwyt Prześlij = asynchroniczny (e) => {
 e.preventDefault();
// Załaduj obrazek
 };


konst uchwytPlikWybrany = (mi) => {
 setfile (e.target.files[0]);
 };
powrót (


"plik" imię="obraz" onChange={wybrany plik uchwytu} />

Po wybraniu pliku i kliknięciu przycisku przesyłania formularz powinien wywołać funkcję handleSubmit. To w tej funkcji prześlesz obraz.

W przypadku dużych formularzy z wieloma polami może to być łatwiejsze użyj biblioteki formularzy, takiej jak formik do obsługi walidacji i przesyłania.

Przesyłanie pliku obrazu do zasobnika pamięci Supabase

W funkcji handleSubmit użyj klienta Supabase, aby przesłać obraz, dodając poniższy kod.

konst uchwyt Prześlij = asynchroniczny (e) => {
 e.preventDefault();
konst nazwa pliku = `${uidv4()}-${nazwa.pliku}`;
konst { dane, błąd } = czekać na supabase.storage
 .z("obrazy")
 .upload (nazwa pliku, plik, {
 kontrola pamięci podręcznej: "3600",
 wstaw: FAŁSZ,
 });
konst ścieżka do pliku = ścieżka do danych;
// zapisz ścieżkę do pliku w bazie danych
 };

W tej funkcji tworzysz unikalną nazwę pliku, łącząc nazwę pliku i identyfikator UUID wygenerowany przez pakiet uuid npm. Jest to zalecane, aby uniknąć zastępowania plików o tej samej nazwie.

Będziesz musiał zainstalować pakiet uuid przez npm, więc skopiuj i uruchom poniższe polecenie w terminalu.

npm uuid instalacji

Następnie u góry strony przesyłania zaimportuj wersję 4 uuid.

import { v4 Jak uuidv4 } z„identyfikator użytkownika”;

Jeśli nie chcesz używać pakietu uuid, istnieje kilka innych metody, których możesz użyć do generowania unikalnych identyfikatorów.

Następnie użyj klienta supabase, aby przesłać plik do zasobnika pamięci o nazwie „obrazy”. Pamiętaj, aby zaimportować klienta supabase na początku pliku.

import { nadbaza} z"@/lib/supabase";

Zauważ, że przekazujesz ścieżkę do obrazu i samego obrazu. Ta ścieżka działa tak samo jak w systemie plików. Na przykład, jeśli zapisujesz obraz w folderze w zasobniku o nazwie public, określiłbyś ścieżkę jako „/public/nazwa pliku”.

Supabase zwróci obiekt zawierający obiekt data i error. Obiekt danych zawiera adres URL obrazu, który właśnie przesłałeś.

Aby ta funkcja przesyłania działała, musisz utworzyć zasady dostępu, które pozwolą Twojej aplikacji na wstawianie i odczytywanie danych w zasobniku Supabase, wykonując następujące kroki:

  1. Na pulpicie nawigacyjnym projektu kliknij przycisk Składowanie zakładkę na lewym pasku bocznym.
  2. Wybierz zasobnik do przechowywania i kliknij Dostęp patka.
  3. Pod Zasady zasobnika, Kliknij Nowa polityka przycisk.
  4. Wybierz Do pełnej personalizacji możliwość stworzenia polisy od podstaw.
  5. w Dodaj zasady wprowadź nazwę swojej polityki (np. „Zezwalaj na wstawianie i odczytywanie”).
  6. Wybierać WSTAWIĆ I WYBIERAĆ uprawnienia od Dozwolone operacje menu rozwijane.
  7. Kliknij Recenzja przycisk, aby przejrzeć zasady.
  8. Kliknij Ratować przycisk, aby dodać zasady.

Przesyłanie obrazów powinno być teraz możliwe bez zgłaszania błędu dostępu.

Obsługa przesłanych obrazów w Twojej aplikacji

Aby wyświetlić obraz w swojej witrynie, potrzebujesz publicznego adresu URL, który możesz pobrać na dwa różne sposoby.

Możesz użyć klienta Supabase w następujący sposób:

konst ścieżka do pliku = "path_to_file_in_buckey"
konst { dane } = nadbaza
 .składowanie
 .z('obrazy')
 .getPublicUrl(`${ścieżka do pliku}`)

Możesz też ręcznie połączyć adres URL zasobnika ze ścieżką do pliku:

konst ścieżka do pliku = `${bucket_url}/${ścieżka do pliku}`

Użyj dowolnej preferowanej metody. Gdy masz ścieżkę do pliku, możesz użyć jej w komponencie obrazu Next.js w następujący sposób:

"" szerokość={200} wysokość={200}/>

Ten kod wyświetli obraz w Twojej witrynie.

Tworzenie niezawodnych aplikacji za pomocą Supabase

Za pomocą tego kodu możesz zaakceptować plik od użytkownika za pośrednictwem formularza i przesłać go do magazynu Supabase. Następnie możesz pobrać ten obraz i udostępnić go w swojej witrynie.

Oprócz przechowywania obrazów Supabase ma inną funkcjonalność. Możesz utworzyć bazę danych PostgreSQL, napisać funkcje brzegowe i skonfigurować uwierzytelnianie dla swoich użytkowników.