Самое простое руководство по кодированию и декодированию изображений с помощью base64.

Введение

Обычной практикой при добавлении изображения во внешнее приложение является просто ввод URL-адреса указанного изображения или создание локального каталога, из которого вы можете добавить любое изображение, которое вы будете использовать для своего приложения. Но что, если вы создаете приложение, требующее от пользователей загрузки собственных фотографий. Это требует другого подхода к решению этой проблемы.
Многие доступные учебные руководства посвящены использованию мультимедийных или облачных хранилищ на стороне сервера для хранения изображений в базе данных, но в этой статье вы узнаете, как достичь той же цели с помощью base64.

Что такое Base64?

Base64, также известный как Base64 Content-Transfer-Encoding, - это метод кодирования и декодирования, используемый для преобразования двоичных данных в текстовый формат Американского стандарта обмена информацией (ASCII) и наоборот. - Технопедия

Любые двоичные данные (например, изображение в данном случае) могут быть закодированы с помощью base64, и закодированные данные обычно состоят из 64 английских символов, которые не читаются человеком. Когда изображение сохраняется с использованием base64 в базе данных, такой как MongoDB, изображение сохраняется в базе данных в виде строки. Затем эту строку можно при необходимости декодировать обратно в исходную форму.

Создание вашего сервера

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

mkdir server
cd server

Затем мы инициализируем проект, используя команду ниже. Эта команда интегрирует package.json в ваше приложение. Package.json помогает отслеживать все наши пакеты и зависимости.

npm init -y

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

npm i express mongoose cors
  • Cors: это сокращение от «Cross-Origin Resource Sharing», используемого для защиты веб-сервера от доступа другого веб-сайта.
  • Express: это фреймворк node.js, который помогает ускорить создание приложений на основе узлов.
  • Mongoose: это библиотека моделирования объектных данных (ODM), которая упрощает доступ, взаимодействие и использование MongoDB.

На сервере нам нужно создать еще один каталог для размещения модели и схемы.

mkdir models
touch models/post.js

Наша схема будет выглядеть так:

Вы могли заметить, что я создал только один ключ объекта в схеме, это myFile. Этот ключ имеет значение строка, в котором будут храниться закодированные данные изображения.
Затем мы создадим в каталоге сервера файл под названием index.js ’’, который будет содержать остальную часть нашего кода.

touch index.js

Наш файл index.js будет содержать следующее:

На этом мы закончили с сервером. Итак, мы запустим наш сервер, используя следующую команду:

node index.js

Создание нашего приложения React

Пришло время перейти к клиентской части нашего приложения. Мы начнем с создания реагирующего приложения и изменения его в каталоге приложения. После этого мы создадим новый каталог с именем «components», а затем файл jsx с именем «ImageUploader».

npx create-react-app client
cd client
mkdir components
touch components/ImageUploader.jsx

Единственная зависимость, которая нам потребуется, - это axios, который представляет собой HTTP-клиент на основе обещаний, используемый для выполнения HTTP-запросов. Его можно установить с помощью следующей команды;

npm i axios

Затем в файл ImageUploader.jsx будут добавлены следующие строки кода:

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

  • Функция createImage использует аксиомы для отправки данных через сервер в базу данных.
  • Функция createPost асинхронно создает новое изображение или возвращает ошибку в зависимости от параметров, указанных на сервере.
  • Функция convertToBase64 использует JavaScript FileReader, у которого есть метод readAsDataURL, который считывает двоичные данные и кодирует их как URL-адрес данных base64. Как следует из названия, его задача - преобразовывать файлы в base64.
  • Функция handleFileUpload нацелена на файл, который будет загружен, и файл асинхронно конвертируется в base64 с помощью функции convertToBase64. Затем закодированные данные используются для обновления состояния postImage.
  • Затем функция handleSubmit отправляет закодированные данные в виде строки в базу данных при нажатии кнопки отправки.

Клиентскую часть нашего приложения можно запустить с помощью команды npm start в терминале. Как только клиентская и серверная стороны работают одновременно, вы можете загрузить любое изображение, и оно будет сохранено в базе данных. Для ясности я загрузил изображение, и с помощью MongoDB Compass мы можем получить доступ к данным, как показано ниже:

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

Заключение

Если вы дошли до этого момента, примите наши поздравления. Вы успешно научились сохранять изображения в базе данных с помощью base64. Если вам понравился этот урок, пожалуйста, дайте мне пять. Для комментариев, публикаций или вопросов просто подписывайтесь на меня в Twitter. Спасибо.