Как да направите лесно качването на изображения с Angular

Това е втората част от урока за това как да качите изображение в Amazon S3. Можете да намерите първата част тук. В тази статия ще разгледаме ъгловата част.

Можете също така да гледате стъпка по стъпка видео урокът за качване на изображение. Връзката е предоставена в долната част на тази статия.

1. Създайте първо шаблон

Първо, искаме да създадем компонент за многократна употреба, който ще бъде лесно включен в други компоненти.

Нека започнем с обикновен HTML шаблон за нашето въвеждане. Не забравяйте да приложите избрани от вас стилове или можете да ги получите от моето репо за GitHub.

Важно тук е вид вход, който е зададен на файл. Атрибутът Accept определя приетите файлове за въвеждане. Image / * указва, че чрез този вход можем да избираме изображения от всякакъв тип. #imageInput е референция на входа, на който можем да имаме достъп до качените файлове.

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

2. Не забравяйте за компонентния код

Нека разбием този код Можете да видите в processFile, че получаваме въвеждане на изображение, което изпратихме от събитието за промяна. Чрез писане на imageInput.files [0] имаме достъп до първия файл. Нуждаем се от четец, за да имаме достъп до допълнителни свойства на файл. Обаждайки се readAsDataURL, можем да получим base64 представяне на изображение във функцията за обратно извикване на addEventListener, за който сме се абонирали преди.

В функция за обратно извикване създаваме екземпляр на ImageSnippet. Първата стойност е base64 представяне на изображение, което ще покажем по-късно на екрана. Втората стойност е самия файл, който ще изпратим на сървъра за качване в Amazon S3.

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

3. Имаме нужда и от услуга

Няма да е ъглово приложение без услуга. Услугата ще бъде тази, която отговаря за изпращане на заявка до нашия сървър на Node.

Както ви казах в предишната лекция, трябва да изпратим изображение като част от данните на формуляра. Ще добавим изображението под ключа на изображение, за да формираме данни (същият ключ, който сме конфигурирали преди в Node). И накрая, просто трябва да изпратим заявка до сървъра с formData в полезен товар.

Сега можем да празнуваме. Това е! Изображението е изпратено за качване!

В следващите редове ще предоставя малко допълнителен код за по-добро потребителско изживяване.

4. Допълнителни актуализации на UX

Добавихме нови свойства към ImageSnippet: В очакване и състояние. Чакането може да бъде невярно или вярно, в зависимост от това дали в момента се качва изображение. Състоянието е резултат от процеса на качване. Тя може да бъде ОК или НЕПРЕД.

OnSuccess и onError се извикват след качване на изображението и те определят състоянието на изображението.

Добре, сега нека да разгледаме актуализирания файл с шаблони:

Тук показваме каченото ни изображение и грешки на екрана в зависимост от състоянието на изображението. Когато изображението е в очакване, ние също показваме хубаво завъртящо се изображение, за да известим потребителя за качване на активност.

5. Добавете малко стайлинг

Стиловете не са в центъра на вниманието на този урок, така че можете да получите всички SCSS стилове в тази връзка.

Работата свършена! :) Това трябва да бъде за едно обикновено качване на изображения. Ако нещо не е ясно, уверете се, че сте гледали първо част от този урок.

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

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

Видео лекция: Урок за YouTube

Наздраве,

Filip