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

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

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

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

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

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

 Select Image  

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

A Change събитие се задейства, когато изберете файл. Така че нека да разгледаме кода на класа.

2. Не забравяйте за Component Code

class ImageSnippet { constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { }, (err) => { }) }); reader.readAsDataURL(file); } }

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

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

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

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

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

export class ImageService { constructor(private http: Http) {} public uploadImage(image: File): Observable { const formData = new FormData(); formData.append('image', image); return this.http.post('/api/v1/image-upload', formData); } }

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

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

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

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

class ImageSnippet { pending: boolean = false; status: string = 'init'; constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} private onSuccess() { this.selectedFile.pending = false; this.selectedFile.status = 'ok'; } private onError() { this.selectedFile.pending = false; this.selectedFile.status = 'fail'; this.selectedFile.src = ''; } processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.selectedFile.pending = true; this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { this.onSuccess(); }, (err) => { this.onError(); }) }); reader.readAsDataURL(file); } }

Добавихме нови свойства към ImageSnippet: Pending и Status. Изчакващото може да бъде фалшиво или вярно, в зависимост от това дали дадено изображение се качва в момента. Състоянието е резултат от процеса на качване. Тя може да бъде OK или FAIL.

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

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

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

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

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

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

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

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

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

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

Наздраве,

Филип