Як полегшити завантаження зображень за допомогою Angular

Це друга частина підручника про те, як завантажити зображення на Amazon S3. Першу частину ви можете знайти тут. У цій статті ми розглянемо кутову частину.

Ви також можете переглянути мій покроковий відео-посібник із завантаження зображень. Посилання наведено внизу цієї статті.

1. Спершу створіть шаблон

По-перше, ми хочемо створити багаторазовий компонент, який буде легко підключати до інших компонентів.

Почнемо з простого HTML-шаблону для нашого введення. Не забудьте застосувати обрані вами стилі, або ви можете отримати їх із мого репозиторію GitHub.

 Select Image  

Тут важливим є тип введення, який встановлюється як файл. Атрибут Accept визначає прийняті файли для введення. Image / * визначає, що ми можемо вибрати зображення будь-якого типу за допомогою цього входу. #imageInput - це посилання на дані, за якими ми можемо отримати доступ до завантажених файлів.

Change подія викликається , коли ми вибираємо файл. Тож давайте поглянемо на код класу.

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

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); } }

Давайте розберемо цей код. Ви можете побачити в процесі файлу, щоми отримуємо введення зображення, яке ми надіслали з події зміни . Написавши 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 and Status. Очікування може бути помилковим або істинним, залежно від того, чи зараз завантажується зображення. Статус - це результат процесу завантаження. Це може бути нормально або не вдалося .

OnSuccess і onError викликаються після завантаження зображення, і вони встановлюють статус зображення.

Гаразд, давайте подивимось на оновлений файл шаблону:

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

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

5. Додайте трохи стилю

Стилінг не є основним предметом цього підручника, тому ви можете отримати всі стилі SCSS за цим посиланням.

Робота виконана! :) Це повинно бути для простого завантаження зображень. Якщо щось незрозуміле, спочатку перегляньте першу частину цього підручника.

Якщо вам подобається цей підручник, сміливо переглядайте мій повний курс з Udemy - Повне керівництво Angular, React & Node | Додаток у стилі Airbnb.

Виконаний проект: Моє сховище GitHub

Відеолекція : Підручник YouTube

Ура,

Філіп