Как да настроите лесно качване на изображения с Node и AWS S3

Ръководство стъпка по стъпка, обясняващо как да качите изображение или друг файл в услугата Amazon S3.

Това е първата част от урок, в който ще обработваме сървърната (Node.js) част от кода.

Подготвих видео урок и в YouTube. Можете да намерите връзка в ресурсите в долната част на тази статия.

1. Какво трябва да инсталираме и кратко описание.

multer: междинен софтуер за обработка на файлове с данни. Основно се използва за качване на файлове. Повече информация: 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

Първо, нека създадем акаунт на //aws.amazon.com. Amazon предлага невероятно безплатно ниво, което можете да използвате за първата година. След влизане потърсете услугата S3.

Просто казано, S3 е облачна услуга за съхранение на файлове.

Трябва да създадем кофа . Можете да си представите кофа като папка за вашите файлове. Изберете име на група и региона . Тъй като това е проста настройка, ние не се интересуваме от други конфигурации. (Настройката по подразбиране е наред - ако нещо не е ясно, попитайте в коментари). Кликнете върху „ Напред “, докато не станете на Преглед и създайте своята група.

Придвижете се до създадената от вас група и проверете лентата за URL адреси . Запомнете името на кофата си (за мен „среден тест“) и региона (за мен „us-east“).

Сега трябва да получим нашите сигурни идентификационни данни . Преминете през името на акаунта си до „ моите идентификационни данни за сигурност “. След това „ Ключове за достъп “ и Създаване на нов ключ за достъп .

Никога не споделяйте ключовете си с никого! Временно запазете тези ключове в някакъв файл или изтеглете файла с ключове, защото се нуждаем от ключове, за да настроим качване на файл.

Добре. Настройката на Amazon е готова!

3. Отидете във вашия редактор за кодиране

Тук няма да обяснявам основите на Node или Express. Този урок е фокусиран само върху качването на файла. Ако се интересувате от цялостното изпълнение на проекта, проверете моето хранилище на GitHub или вижте пълния урок. (Можете да намерите връзки в края на тази публикация в блога).

  1. Създайте вашата услуга за качване на файлове със следното изпълнение (първа част):

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

Първо, ние импортираме всички наши инсталирани пакети. На второ част е да изберете нашите AWS . Трябва да предоставим нашите тайни ключове и регион от URL лентата, която ви показах преди.

След конфигурирането на AWS можем да създадем екземпляр на нашия Amazon S3. Все още не сме приключили. Сега, нека видим втората част на това изпълнение.

Сега можем да настроим решение за многокачково качване. Трябва да предоставим функция на обекта мултер със следните свойства.

  1. s3 : екземпляр на Amazon S3, който създадохме преди.
  2. bucket : име на нашата група (в моя случай: „среден тест“)
  3. acl : контрол на достъпа за файла („публично четене“ означава, че всеки може да преглежда файлове), можете да проверите всички налични типове тук: връзка Amazon
  4. metada : функция за обратно извикване за задаване на метаданни за качени файлове. Тук задавам допълнителни метаданни за fieldName . Можете да видите тези данни на изображението по-долу.

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

След цялата настройка експортираме обекта за качване, за да го използваме в други файлове.

4. Настройте маршрут за качване на изображение

Почти сме готови, но потребителите на нашето приложение все още нямат достъп до качването на изображения. Трябва да им предоставим тази функционалност. Нека създадем крайна точка за запазване на файл.

Експортираме нашия обект за качване, който сме създали преди, и създаваме нов от него. Новият е по-специфичен с допълнителна конфигурация за качване на едно изображение . Ние му предоставяме стойност на изображението . Тази стойност е много важна, защото ние ще изпратим нашия файл на сървър под този ключ.

Втората част е самият маршрут. POST крайна точка към „ / качване на изображение “. Вътре наричаме singleUpload . Не забравяйте да предадете вътре req и res, защото multer ще получи файла, който изпращаме на сървъра от req обекта.

Проверяваме за грешка. Ако няма такъв, ние изпращаме обратно JSON със стойността на местоположението на нашия файл, което е просто URL към файла на Amazon .

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

5. Да го тестваме в Postman.

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

Ако нямате Postman, можете просто да го изтеглите като разширение на Google Chrome. Просто потърсете „ разширение за пощальон google chrome “. Пощальонът е приложение за инициализиране, изпращане и тестване на заявки към сървъра по прост въпрос.

  1. Изпратете заявка за публикация до крайна точка, която създадохме преди. В моя случай посочих в пътя на възела на / image-upload .
  2. Изберете Body of form-data .
  3. Предоставете ключа на изображението. Ще забележите, че това е ключ, който сме задали преди в нашия код. Проверете файл и изберете файл от вашия компютър.
  4. Изпратете заявката .

Трябва да получите обратно JSON с URL адреса на вашия качен файл.

Voilà! Това е момчета. Това е просто качване на файл за Node. В следващата статия ще продължа с внедряване на интерфейс за Angular.

Ако ви харесва този урок, не се колебайте да проверите пълния ми курс по Udemy - Пълното ръководство за Angular, React & Node | Приложение в стил Airbnb.

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

Завършен проект: Моето хранилище на github

Наздраве,

Филип