Це друга частина підручника про те, як завантажити зображення на 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
Ура,
Філіп