Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Съхраняването на изображения в база данни обикновено не се препоръчва. Това може бързо да стане скъпо поради количеството необходима мощност за съхранение и обработка. Използването на рентабилна и мащабируема услуга за съхранение като хранилището Supabase е по-добро.

По-долу ще научите как да качвате изображения в кофа за съхранение с помощта на клиентската библиотека на Supabase JavaScript и как да обслужвате изображенията в приложение Next.js.

Създаване на Supabase проект

Ако все още нямате готово приложение Next.js, следвайте официалния Ръководство за започване на Next.js за да създадете вашето приложение.

След като направите това, следвайте тези стъпки, за да създадете база данни Supabase:

  1. Отидете до уебсайта на Supabase и създайте нов акаунт. Ако вече имате акаунт, влезте.
  2. От таблото за управление на Supabase щракнете върху Създайте нов проект бутон.
    3. instagram viewer
  3. Дайте име на вашия проект и щракнете върху Създайте проект бутон. След като Supabase създаде проекта, той ще ви пренасочи към таблото за управление на проекта

След като създадете проекта, създайте кофа за съхранение.

Създаване на кофа за съхранение на Supabase

Кофа за съхранение ви позволява да съхранявате медийни файлове като изображения и видеоклипове. В Supabase можете да създадете кофа за съхранение на таблото за управление или да използвате клиентската библиотека.

За да използвате таблото за управление, изпълнете следните стъпки:

  1. Отидете на Съхранение на Supabase страница в таблото за управление.
  2. Кликнете Нова кофа и въведете име за кофата. Можете да го наименувате изображения, тъй като ще съхранявате изображения в него.
  3. Кликнете Създаване на кофа.

След това ще настроите клиент на Supabase във вашето приложение, за да взаимодейства с кофата.

Настройване на клиента Supabase

Започнете с инсталиране на клиентска библиотека supabase-js през терминала:

npm инсталира @supabase/supabase-js

След това създайте нова папка с име lib в основата на вашето приложение или в папката src, ако я използвате. В тази папка добавете нов файл с име supabase.js и използвайте следния код, за да инициализирате клиента Supabase.

импортиране { createClient } от„@supabase/supabase-js“
износконст supabase = createClient('', '')

Заменете URL адреса на проекта и anon ключа с вашите собствени подробности, които можете да намерите в Настройки на проекта Supabase. Можете да копирате подробностите във файла .env и да ги направите справка от там.

SUPABASE_PROJECT_URL="url_адрес_на_вашият_проект"
SUPABASE_PROJECT_ANON_KEY="вашият_проект_аноничен_ключ"

Сега, в supabase.js, трябва да имате:

износконст supabase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

След като направите това, създайте формуляр, който ще приема изображенията.

Създаване на формуляр, който приема изображения

Вътре папката на приложението Next.js на вашето приложение, създайте подпапка с име качване и добавете нов файл с име page.js. Това ще създаде нова страница, достъпна в /upload route. Ако използвате Next.js 12, създайте upload.js в страници папка.

В страницата за качване добавете следния код, за да създадете формуляра.

"използване на клиент";
импортиране {useState} от"реагира";
износпо подразбиранефункцияСтраница() {
конст [file, setfile] = useState([]);


конст handleSubmit = асинхронен (e) => {
 e.preventDefault();
// качи изображение
 };


конст handleFileSelected = (д) => {
 setfile (e.target.files[0]);
 };
връщане (


"файл" име="изображение" onChange={handleFileSelected} />

Когато изберете файл и щракнете върху бутона за изпращане, формулярът трябва да извика функцията handleSubmit. В тази функция ще качите изображението.

За големи формуляри с множество полета може да бъде по-лесно използвайте библиотека с формуляри като formik за обработка на валидиране и подаване.

Качване на файл с изображение в кофа за съхранение на Supabase

Във функцията handleSubmit използвайте клиента Supabase, за да качите изображението, като добавите кода по-долу.

конст handleSubmit = асинхронен (e) => {
 e.preventDefault();
конст име на файл = `${uuidv4()}-${file.name}`;
конст {данни, грешка} = изчакайте supabase.storage
 .от("изображения")
 .качване (име на файл, файл, {
 cacheControl: "3600",
 upsert: невярно,
 });
конст filepath = data.path;
// запишете пътя на файла в базата данни
 };

В тази функция вие създавате уникално име на файл чрез свързване на името на файла и UUID, генериран от пакета uuid npm. Това се препоръчва, за да се избегне презаписването на файлове с едно и също име.

Ще трябва да инсталирате пакета uuid чрез npm, така че копирайте и изпълнете командата по-долу в терминала.

npm инсталирайте uuid

След това в горната част на страницата за качване импортирайте версия 4 на uuid.

импортиране {v4 като uuidv4} от"uuid";

Ако не искате да използвате пакета uuid, има други методи, които можете да използвате за генериране на уникални идентификатори.

След това използвайте supabase клиента, за да качите файла в кофата за съхранение, наречена „images“. Не забравяйте да импортирате supabase клиента в горната част на вашия файл.

импортиране { supabase } от"@/lib/supabase";

Обърнете внимание, че предавате пътя към изображението и самото изображение. Този път работи по същия начин, както във файловата система. Например, ако записвате изображението в папка в кофата, наречена public, ще посочите пътя като „/public/filename“.

Supabase ще върне обект, съдържащ данните и обекта за грешка. Обектът с данни съдържа URL адреса на изображението, което току-що сте качили.

За да работи тази функция за качване, трябва да създадете политика за достъп, която позволява на вашето приложение да вмъква и чете данни в кофа за съхранение на Supabase, като следвате тези стъпки:

  1. На таблото за управление на вашия проект щракнете върху Съхранение раздел в лявата странична лента.
  2. Изберете вашата кофа за съхранение и щракнете върху Достъп раздел.
  3. Под Политики за кофи, щракнете върху Нова политика бутон.
  4. Изберете За пълно персонализиране опция за създаване на политика от нулата.
  5. В Добавете политика диалогов прозорец, въведете име за вашата политика (напр. „Разрешаване на вмъкване и четене“).
  6. Изберете ВМЪКНЕТЕ и ИЗБЕРЕТЕ разрешения от Разрешени операции падащо меню.
  7. Щракнете върху Преглед бутон за преглед на правилата.
  8. Щракнете върху Запазване бутон за добавяне на политиката.

Вече трябва да можете да качвате изображения, без да генерирате грешка при достъп.

Обслужване на качените изображения във вашето приложение

За да покажете изображението на вашия сайт, имате нужда от публичен URL адрес, който можете да извлечете по два различни начина.

Можете да използвате клиента Supabase по следния начин:

конст файлов път = "път_към_файл_в_бъки"
конст {данни} = надбаза
 .съхранение
 .от("изображения")
 .getPublicUrl(`${filepath}`)

Или можете ръчно да свържете URL адреса на кофата с пътя на файла:

конст файлов път = `${bucket_url}/${filepath}`

Използвайте метода, който предпочитате. След като имате пътя на файла, можете да го използвате в компонента на изображението Next.js по следния начин:

"" ширина={200} височина={200}/>

Този код ще покаже изображението на вашия сайт.

Създаване на надеждни приложения със Supabase

Използвайки този код, можете да приемете файл от потребител чрез формуляр и да го качите в хранилището на Supabase. След това можете да извлечете това изображение и да го сервирате на вашия сайт.

Освен съхраняване на изображения, Supabase има и други функции. Можете да създадете PostgreSQL база данни, да напишете периферни функции и да настроите удостоверяване за вашите потребители.