Автор оригинала: FreeCodeCamp Community Member.
FILIP JERGA
Это вторая часть учебника о том, как загрузить изображение на Amazon S3. Вы можете найти первую часть здесь Отказ В этой статье мы посмотрим на угловую часть.
Вы также можете посмотреть мой шаг за шагом видеоурок загрузки изображения. Ссылка предоставляется внизу этой статьи.
1. Сначала создайте шаблон
Во-первых, мы хотим создать многоразовый компонент, который будет легко подключен к другим компонентам.
Давайте начнем с простого шаблона HTML для нашего ввода. Не забудьте применить стили по вашему выбору, или вы можете получить их от моего Github Repo Отказ
Важно вот Тип ввода, который установлен на файл. Принять Атрибут определяет принятые файлы для ввода. Image/* Указывает, что мы можем выбрать изображения любого типа на этот вход. #imageInput это эталон ввода, на которой мы можем получить доступ к загруженным файлам.
А Изменить Событие уволено, когда мы выбираем файл. Итак, давайте посмотрим на код класса.
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);
}
}Давайте сломаем этот код. Вы можете увидеть в ПроцессFile что Мы получаем ввод изображения, которую мы отправили из Изменить мероприятие. Письма ImageInput.files [0] Мы получаем доступ к первому Файл Отказ Нам нужен Читатель Для доступа к дополнительным свойствам файла. Призывая Readasdataurl, Мы можем получить представление BASE64 изображения в функции обратного вызова из addeventListener Мы подписались на раньше.
В функции обратного вызова мы создаем экземпляр Imagesnippet. Первый Значение – это представление Base64 изображения, которое мы покажем позже на экране. Второй Значение – это сам файл, который мы отправим на сервер для загрузки на Amazon S3.
Теперь нам просто нужно предоставить этот файл и отправить запрос через услугу.
3. Нам нужен сервис, а также
Это не было бы углового приложения без службы. Сервис будет ответственным за отправку запроса на наш сервер узла.
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);
}
} Как я уже говорил вам в предыдущей лекции, нам нужно отправить изображение как часть Формируйте данные Отказ Мы добавим изображение под ключ изображение формировать данные (тот же клавиш, который мы настроили ранее в узле). Наконец, нам просто нужно отправить запрос на сервер с 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: в ожидании и Статус. В ожидании Может быть ложным или истинным, в зависимости от того, в данный момент его изображение загружается. Статус является результатом процесса загрузки. Это может быть Хорошо или НЕ СМОГЛИ.
OnSuccess и OneRor называются после загрузки изображения, и они устанавливают состояние изображения.
Хорошо, теперь давайте посмотрим на обновленный файл шаблона:
Image Uploaded Succesfuly!Image Upload Failed!
Здесь мы отображаем наше загруженное изображение и ошибки на экране в зависимости от Государство от изображение Отказ Когда изображение ожидается, мы также отображаем хорошее спинничное изображение, чтобы уведомить пользователя загрузки активности.
5. Добавьте немного стиля
Стиль не является фокусом этого учебника, поэтому вы можете получить все стили SCSS в этом ссылка Отказ
Работа сделана!:) Это должно быть для простого загрузки изображения. Если что-то не ясно, убедитесь, что вы сначала смотрели первую часть этого учебника.
Если вам нравится этот учебник, не стесняйтесь проверить свой полный курс по UDEMY – Полный угловой, Raction & Node Guide | Airbnb Style App Отказ
Завершенный проект: Мой репозиторий Github
Видео Лекция : Учебное пособие на YouTube
Ваше здоровье,
Филипс