Како да отпремите слике у корпу за складиштење Супабасе из апликације Нект.јс

Чување слика у бази података се генерално не препоручује. То може брзо постати скупо због потребне количине меморије и процесорске снаге. Боље је користити исплативу и скалабилну услугу складиштења као што је Супабасе складиште.

У наставку ћете научити како да отпремите слике у корпу за складиштење користећи Супабасе ЈаваСцрипт клијентску библиотеку и како да сервирате слике у Нект.јс апликацији.

Креирање пројекта Супабасе

Ако већ немате спремну Нект.јс апликацију, пратите званични Нект.јс водич за почетак да креирате своју апликацију.

Када то урадите, следите ове кораке да бисте креирали Супабасе базу података:

1. Идите на веб локацију Супабасе и креирајте нови налог. Ако већ имате налог, пријавите се.
2. На контролној табли Супабасе кликните на Креирајте нови пројекат дугме.
3. Дајте свом пројекту име и кликните на Креирајте пројекат дугме. Када Супабасе креира пројекат, преусмериће вас на контролну таблу пројекта

Након креирања пројекта, креирајте канту за складиштење.

Креирање канте за складиштење Супабасе

Корпа за складиштење вам омогућава да складиштите медијске датотеке попут слика и видео записа. У Супабасе-у можете креирати канту за складиштење на контролној табли или користити библиотеку клијента.

Да бисте користили контролну таблу, следите ове кораке:

1. Иди на Супабасе Стораге страницу на контролној табли.
2. Кликните Нев Буцкет и унесите назив за корпу. Можете га назвати сликама јер ћете у њега чувати слике.
3. Кликните Цреате Буцкет.

Затим ћете подесити Супабасе клијента у својој апликацији за интеракцију са кантом.

Подешавање Супабасе клијента

Започните инсталирањем супабасе-јс клијентске библиотеке преко терминала:

нпм инсталл @супабасе/супабасе-јс

Затим креирајте нову фасциклу под именом либ у корену ваше апликације или у фасцикли срц ако је користите. У ову фасциклу додајте нову датотеку под називом супабасе.јс и користите следећи код за иницијализацију Супабасе клијента.

увоз { цреатеЦлиент } из'@супабасе/супабасе-јс'
извозконст супабасе = цреатеЦлиент('', '')

Замените УРЛ пројекта и анон кључ својим детаљима које можете пронаћи у Подешавања пројекта Супабасе. Можете копирати детаље у .енв датотеку и референцирати их одатле.

СУПАБАСЕ_ПРОЈЕЦТ_УРЛ="урл_ваш_пројекат"
СУПАБАСЕ_ПРОЈЕЦТ_АНОН_КЕИ="ваш_пројекат_анон_кључ"

Сада, у супабасе.јс, требало би да имате:

извозконст супабасе = цреатеЦлиент(
 процес.енв. СУПАБАСЕ_ПРОЈЕЦТ_УРЛ,
 процес.енв. СУПАБАСЕ_АНОН_КЕИ
);

Када то урадите, направите образац који ће прихватити слике.

Креирање обрасца који прихвата слике

У фолдер апликације Нект.јс ваше апликације, креирајте поддиректоријум под називом отпремити и додајте нову датотеку под називом паге.јс. Ово ће креирати нову страницу доступну на /уплоад рути. Ако користите Нект.јс 12, креирајте уплоад.јс у странице фолдер.

На страници за отпремање додајте следећи код да бисте креирали образац.

"користи клијент";
увоз { усеСтате } из"реаговати";
извозУобичајенофункцијаСтрана() {
конст [фајл, сетфајл] = усеСтате([]);
конст хандлеСубмит = асинц (е) => {
 е.превентДефаулт();
// Учитај слику
 };
конст хандлеФилеСелецтед = (е) => {
 сетфиле (е.таргет.филес[0]);
 };
повратак (


"фајл" наме="слика" онЦханге={хандлеФилеСелецтед} />
"прихвати">Отпреми слику</button>
 </form>
 );
}

Када изаберете датотеку и кликнете на дугме за слање, образац треба да позове функцију хандлеСубмит. У овој функцији ћете отпремити слику.

За велике обрасце са више поља, то може бити лакше користите библиотеку образаца као што је формик за руковање валидацијом и подношењем.

Отпремање датотеке слике у корпу за складиштење Супабасе

У функцији хандлеСубмит, користите Супабасе клијент да отпремите слику додавањем кода испод.

конст хандлеСубмит = асинц (е) => {
 е.превентДефаулт();
конст име датотеке = `${ууидв4()}-${филе.наме}`;
конст { подаци, грешка } = чекати супабасе.стораге
 .фром("слике")
 .уплоад (име датотеке, фајл, {
 цацхеЦонтрол: "3600",
 узбудити: лажно,
 });
конст филепатх = дата.патх;
// чување путање датотеке у бази података
 };

У овој функцији креирате јединствено име датотеке спајањем имена датотеке и УУИД-а који генерише ууид нпм пакет. Ово се препоручује да бисте избегли преписивање датотека које деле исто име.

Мораћете да инсталирате ууид пакет преко нпм-а, па копирајте и покрените наредбу испод у терминалу.

нпм инсталл ууид

Затим, на врху странице за отпремање, увезите верзију 4 ууид-а.

увоз { в4 као ууидв4 } из"ууид";

Ако не желите да користите ууид пакет, постоје неки други методе које можете користити за генерисање јединствених ИД-ова.

Затим користите клијент супабасе да отпремите датотеку у канту за складиштење под називом „слике“. Не заборавите да увезете супабасе клијента на врх ваше датотеке.

увоз { супабасе } из„@/либ/супабасе“;

Имајте на уму да прослеђујете путању до слике и саме слике. Ова путања функционише исто као и у систему датотека. На пример, ако сте сачували слику у фасцикли у канти која се зове јавна, одредили бисте путању као „/публиц/филенаме“.

Супабасе ће вратити објекат који садржи податке и објекат грешке. Објекат података садржи УРЛ до слике коју сте управо отпремили.

Да би ова функција отпремања функционисала, морате да креирате политику приступа која омогућава вашој апликацији да убацује и чита податке у Супабасе корпу за складиштење пратећи ове кораке:

1. На контролној табли пројекта кликните на Складиште картица на левој бочној траци.
2. Изаберите своју канту за складиштење и кликните на Приступ таб.
3. Испод Политике буцкета, кликните Нова политика дугме.
4. Изаберите За потпуно прилагођавање могућност креирања политике од нуле.
5. У Додајте политику дијалог, унесите назив за своју политику (нпр. „Дозволи уметање и читање“).
6. Изаберите ИНСЕРТ и СЕЛЕЦТ дозволе од Дозвољене операције падајући мени.
7. Кликните Преглед дугме за преглед смерница.
8. Кликните сачувати дугме за додавање политике.

Сада би требало да будете у могућности да отпремате слике без грешке у приступу.

Послуживање отпремљених слика у вашој апликацији

Да бисте приказали слику на свом сајту, потребан вам је јавни УРЛ, који можете да преузмете на два различита начина.

Супабасе клијент можете користити овако:

конст филепатх = "патх_то_филе_ин_буцкеи"
конст { подаци } = супабаза
 .складиште
 .фром('слике')
 .гетПублицУрл(`${филепат}`)

Или можете ручно да повежете УРЛ сегмента са путањом датотеке:

конст филепатх = `${буцкет_урл}/${филепат}`

Користите методу коју желите. Када добијете путању датотеке, можете је користити у компоненти слике Нект.јс на следећи начин:

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

Овај код ће приказати слику на вашој веб локацији.

Креирање робусних апликација са Супабасе-ом

Користећи овај код, можете прихватити датотеку од корисника преко обрасца и отпремити је у Супабасе складиште. Затим можете да преузмете ту слику и послужите је на својој веб локацији.

Осим складиштења слика, Супабасе има и друге функције. Можете креирати ПостгреСКЛ базу података, писати ивице функције и подесити аутентификацију за своје кориснике.