Angular Вывод превью изображения перед загрузкой

Маленький пример использования HTML5 FileReader в Angular4 для вывода превьюшки изображения перед загрузкой. По сути  с помощью FileReader  отображается локальный файл, который указанием локального пути не удастся отобразить из-за политики браузера…

  <img #profileImage  src="assets/images/empty-profile.png" alt="" 
class="profile-image" (click)="this.profileImageInput.click()">
<input type="file"  hidden #profileImageInput formControlName="image"
accept="image/jpeg,image/png,image/gif" (change)="imageChoosed($event)">

 

 

 @ViewChild("profileImage")
profileImage: any;
public imageChoosed(event:any){
let reader  = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onloadend = (e) => {
console.log('event');
this.profileImage.nativeElement.src=reader.result;
}
}

 

 


Добавить комментарий