Как настроить простую загрузку изображений с помощью Node и AWS S3

1656542774 kak nastroit prostuyu zagruzku izobrazhenij s pomoshhyu node i aws

Филипп Джерга

Пошаговое руководство пояснено, как загрузить изображение или любой файл в службу Amazon S3.

1*yi56K1oYbapFszZA_N3uPg

Это первая часть учебника, в которой мы будем обрабатывать серверную (Node.js) часть кода.

Я тоже подготовил видеоурок на YouTube. Вы можете найти ссылки на ресурсы внизу этой статьи.

1. Что нам нужно для установки и краткое описание.

мультильтер: промежуточное программное обеспечение для обработки данных. В основном используется для скачивания файлов. Дополнительная информация: Npm Link

multer-s3: расширение multer для легкой загрузки файлов в службу Amazon S3. Дополнительная информация: Npm Link

aws-sdk: необходим пакет для работы с AWS (Amazon Web Services). В нашем случае сервис S3. Дополнительная информация: Npm Link

Перейдите к своим проектам и давайте установим пакеты:

npm install —-save multer multer-s3 aws-sdk

2. Зарегистрируйтесь в AWS

Во-первых, давайте создадим аккаунт на Amazon, который предлагает отличный бесплатный уровень, который вы можете использовать в течение 1-го года. После входа найдите службу S3.

Проще говоря, S3 – это облачный сервис для хранения файлов.

1*kL7kzofPaB83N7EmyV9P2g
Выберите S3

Нам надо создать ведро. Вы можете представить ведро в качестве папки для ваших файлов. Выберите a название ведра и Регион. Поскольку это простая установка, нас не интересуют другие конфигурации. (Настройки по умолчанию в порядке – если что-то не понятно, спрашивайте в комментариях). Нажмите «следующий” пока вы не включите Обзор и создайте свое ведро.

1*ds5x2m5EbltvbBK6b-UJdQ
Создание ковша

Перейдите к созданному сегменту и проверьте свой Строка URL. Запомни свое название ведра (для меня «средний тест») и регион (для меня «нас-восток»).

1*GYbZM5qHrPoto9Kgi7nryw
Проверьте свой URL-адрес.

Теперь нам нужно получить свое безопасные учетные данные. Перейдите по имени своего аккаунта в «мои учетные данные безопасности”. Затем «Ключи доступа” и Создайте новый ключ доступа.

1*X5iF7gUqs_M2IzH2IwYC3Q
1*VAAk0eS8PyT-v-QdnGxoXg
Мои учетные данные безопасности и ключи доступа
1*kZNeP9KvC9hJRLyh6a7Abg
Создать ключ доступа

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

Ладно. Настройка Amazon завершена!

3. Перейдите к редактору кодирования

Я не буду объяснять здесь основания Node или Express. Данное руководство сосредоточено только на загрузке файлов. Если вам интересна полная реализация проекта, просмотрите мой репозиторий GitHub или просмотрите полное руководство. (Ссылки можно найти в конце этой публикации в блоге).

  1. Создайте службу загрузки файлов с такой реализацией (первая часть):

Важное примечание: Никогда не открывайте секретные учетные данные непосредственно в файле! Никогда не разглашайте свои тайные данные! Рассмотрите возможность настройки переменных среды в локальной среде или, в случае развернутых проектов, переменных в облачном поставщике. Лучшим решением будет использование aws-профили: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

Сначала, мы импортируем все установленные пакеты. The второй часть состоит в том настроить нашу AWS. Нам нужно предоставить свое секретные ключи и регион из строки URL, которую я вам показывал раньше.

После установки AWS мы можем создать экземпляр нашего Amazon S3. Мы еще не совсем готовы. Теперь давайте посмотрим вторую часть этой реализации.

Теперь мы можем настроить решения для мультипликационной загрузки. Нам нужно предоставить функцию для объекта multer с такими свойствами.

  1. s3: экземпляр Amazon S3, который мы создали раньше.
  2. ведро: название нашего ведра (в моем случае: «средний тест»)
  3. акл: контроль доступа к файлу («общее чтение» означает, что каждый может просматривать файлы), вы можете проверить все доступные типы здесь: ссылка на amazon
  4. метода: функция обратного вызова для установки метаданных загруженных файлов. Здесь я устанавливаю дополнительные метаданные для a fieldName. Эти данные можно просмотреть ниже.
1*NeYh6Kg4i3BAKD20_ZpfyQ
Метадани

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

1*vjRTskqhTeaGdVDNbtqWeQ
Загруженный файл с текущим названием времени

После всех настроек мы экспортируем файл скачать объекта, чтобы использовать его в других файлах.

4. Настройте маршрут для загрузки изображения

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

Мы экспортируем наш объект загрузки, который мы создали раньше, и создаем новый. Новый является более конкретным с дополнительной конфигурацией для a загрузка одного изображения. Мы предоставляем «изображениеценность для него. Это значение это очень важно, потому что мы отправим наш файл на сервер под этим ключом.

Вторая часть – это сам маршрут. POST конечная точка к ‘/загрузка изображения‘. Внутрь звоним singleUpload. Не забудь перейти внутрь req и res, потому что multer получит файл, который мы посылаем на сервер с объекта req.

Мы проверяем наличие ошибки. Если этого нет, мы отправляем назад JSON со значением расположения нашего файла, которое является просто файлом URL-адрес файла на Amazon.

Аааа и все! Мы можем скачивать файлы на Amazon S3 Now. Достаточно просто, как вы думаете?

5. Давайте испытаем это в Postman.

Чтобы увидеть результаты нашей упорной работы, нам нужно отправить запрос на сервер с изображением, которое мы хотим загрузить. В этой части мы проверим его через Postman. В следующей части учебника мы создадим реализацию в приложении Angular.

Если у вас нет почтальон, вы можете просто загрузить его в качестве расширения для Google Chrome. Просто ищите «Расширение postman для google chrome‘. Postman – это программа для инициализации, отправки и тестирования запросов на сервер в простом деле.

1*OQiXF-lDa8GUhcKh7nZDGw
Почтальон
  1. Отправьте запрос на доставку к конечной точке, которую мы создали раньше. В моем случае я указал в узле путь /загрузка изображения.
  2. Выберите Тело с форма-данные.
  3. Обеспечьте ключ с изображение. Вы заметите, что это a ключ мы настроили раньше в нашем коде. Проверьте файл и выберите файл из компьютера.
  4. Отправьте запрос.

Вы должны вернуть JSON с URL-адресом загруженного файла.

Вуаль! Вот так ребята. Это простая загрузка файла для Node. В следующей статье я продолжу реализацию интерфейса для Angular.

Если вам нравится этот учебник, не стесняйтесь проверить мой полный курс на Udemy Полное руководство по Angular, React и Node | Приложение в стиле Airbnb.

Видео лекция: Youtube видео

Завершенный проект: Мой репозиторий

Здоровья,

Филипп

Добавить комментарий

Ваш адрес email не будет опубликован.