Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Хранение изображений в базе данных обычно не рекомендуется. Это может быстро стать дорогостоящим из-за требуемого объема памяти и вычислительной мощности. Лучше использовать экономичную и масштабируемую службу хранения, такую ​​как хранилище Supabase.

Ниже вы узнаете, как загружать изображения в сегмент хранилища с помощью клиентской библиотеки Supabase JavaScript и как обслуживать изображения в приложении Next.js.

Создание проекта надбазы

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

После этого выполните следующие действия, чтобы создать базу данных Supabase:

  1. Перейдите на сайт Supabase и создайте новую учетную запись. Если у вас уже есть учетная запись, войдите в систему.
  2. На панели управления Supabase щелкните значок Создать новый проект кнопка.
    3. instagram viewer
  3. Дайте вашему проекту имя и нажмите кнопку Создать проект кнопка. Как только Supabase создаст проект, он перенаправит вас на панель инструментов проекта.

После создания проекта создайте сегмент хранилища.

Создание сегмента хранилища Supabase

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

Чтобы использовать панель мониторинга, выполните следующие действия:

  1. Перейти к Сверхбазовое хранилище страницу в Личном кабинете.
  2. Нажмите Новое ведро и введите имя корзины. Вы можете назвать его изображениями, так как вы будете хранить в нем изображения.
  3. Нажмите Создать корзину.

Затем вы настроите клиент Supabase в своем приложении для взаимодействия с корзиной.

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

Начните с установки клиентской библиотеки supabase-js через терминал:

npm установить @supabase/supabase-js

Затем создайте новую папку с именем lib в корне вашего приложения или в папке src, если вы ее используете. В эту папку добавьте новый файл с именем supabase.js и используйте следующий код для инициализации клиента Supabase.

Импортировать { создать клиент } от'@supabase/supabase-js'
экспортконстанта супабаза = создать клиент ('', '')

Замените URL-адрес проекта и ключ анон своими данными, которые вы можете найти в Настройки проекта надбазы. Вы можете скопировать детали в файл .env и ссылаться на них оттуда.

SUPABASE_PROJECT_URL="ваш_проект_url"
SUPABASE_PROJECT_ANON_KEY="ваш_проект_anon_key"

Теперь в supabase.js у вас должно быть:

экспортконстанта супабаза = создать клиент (
 процесс.env. SUPABASE_PROJECT_URL,
 процесс.env. SUPABASE_ANON_KEY
);

Как только вы это сделаете, создайте форму, которая будет принимать изображения.

Создание формы, принимающей изображения

Внутри папка приложения Next.js вашего приложения, создайте подпапку с именем загрузить и добавьте новый файл с именем страница.js. Это создаст новую страницу, доступную по маршруту /upload. Если вы используете Next.js 12, создайте upload.js в страницы папка.

На странице загрузки добавьте следующий код, чтобы создать форму.

"использовать клиент";
Импортировать { состояние использования } от"реагировать";
экспортпо умолчаниюфункцияСтраница() {
константа [файл, setfile] = useState([]);


константа обработатьОтправить = асинхронный (е) => {
 e.preventDefault();
// загрузить изображение
 };


константа дескриптор выбранных файлов = (е) => {
 setfile (e.target.files[0]);
 };
возвращаться (


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

Когда вы выбираете файл и нажимаете кнопку отправки, форма должна вызывать функцию handleSubmit. Именно в этой функции вы загрузите изображение.

Для больших форм с несколькими полями может быть проще используйте библиотеку форм, например formik для обработки проверки и отправки.

Загрузка файла изображения в сегмент хранилища Supabase

В функции handleSubmit используйте клиент Supabase для загрузки изображения, добавив приведенный ниже код.

константа обработатьОтправить = асинхронный (е) => {
 e.preventDefault();
константа имя файла = `${uuidv4()}-${файл.имя}`;
константа {данные, ошибка} = Ждите supabase.storage
 .от("изображений")
 .upload (имя файла, файл, {
 КэшКонтроль: "3600",
 вверху: ЛОЖЬ,
 });
константа путь к файлу = данные.путь;
// сохранить путь к файлу в базе данных
 };

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

Вам нужно будет установить пакет uuid через npm, поэтому скопируйте и выполните приведенную ниже команду в терминале.

npm установить UUID

Затем в верхней части страницы загрузки импортируйте версию 4 uuid.

Импортировать { v4 как uuidv4 } от"уид";

Если вы не хотите использовать пакет uuid, есть другие методы, которые вы можете использовать для создания уникальных идентификаторов.

Затем используйте клиент супабазы, чтобы загрузить файл в ведро хранилища под названием «изображения». Не забудьте импортировать клиент супабазы ​​вверху вашего файла.

Импортировать { супербаза } от"@/библиотека/супабаза";

Обратите внимание, что вы передаете путь к изображению и само изображение. Этот путь работает так же, как и в файловой системе. Например, если вы сохраняете изображение в папку в корзине с именем public, вы должны указать путь как «/public/filename».

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

Чтобы эта функция загрузки работала, вы должны создать политику доступа, которая позволит вашему приложению вставлять и считывать данные в корзину хранилища Supabase, выполнив следующие действия:

  1. На панели управления проекта нажмите кнопку Хранилище вкладку на левой боковой панели.
  2. Выберите сегмент хранилища и нажмите кнопку Доступ вкладка
  3. Под Политики сегмента, щелкните Новая политика кнопка.
  4. Выберите Для полной настройки возможность создать политику с нуля.
  5. в Добавить политику введите имя для своей политики (например, «Разрешить вставку и чтение»).
  6. Выбирать ВСТАВЛЯТЬ и ВЫБИРАТЬ разрешения от Разрешенные операции выпадающее меню.
  7. Нажмите на Обзор Кнопка для просмотра политик.
  8. Нажмите на Сохранять кнопку, чтобы добавить политику.

Теперь вы сможете загружать изображения без возникновения ошибки доступа.

Обслуживание загруженных изображений в вашем приложении

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

Вы можете использовать клиент Supabase следующим образом:

константа путь к файлу = "path_to_file_in_buckey"
константа {данные} = дополнительная база
 .хранилище
 .от('изображений')
 .getPublicUrl(`${путь к файлу}`)

Или вы можете вручную объединить URL-адрес корзины с путем к файлу:

константа путь к файлу = `${bucket_url}/${путь к файлу}`

Используйте любой метод, который вы предпочитаете. Получив путь к файлу, вы можете использовать его в компоненте изображения Next.js следующим образом:

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

Этот код будет отображать изображение на вашем сайте.

Создание надежных приложений с помощью Supabase

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

Помимо хранения изображений, у Supabase есть и другие функции. Вы можете создать базу данных PostgreSQL, написать пограничные функции и настроить аутентификацию для своих пользователей.