Предварительный просмотр изображения / видео в формате Angular - PullRequest
Новая
       10

Предварительный просмотр изображения / видео в формате Angular

0 голосов
/ 22 сентября 2019

Я пытаюсь загрузить изображение или видео в Angular.Я хотел показать его превью.У меня нет проблем с предварительным просмотром изображения, моя проблема в том, как я могу просмотреть видео?Пожалуйста, посмотрите эту ссылку на стек:

НАЖМИТЕ ЗДЕСЬ

КОД 

 onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = (event) => {
        this.url = event.target.result;
      }
    }
  }

1 Ответ

0 голосов
/ 22 сентября 2019

Вы можете решить, является ли файл типом видео / изображения, а затем перенаправить его на подходящие элементы управления html 

<img [src]="url" *ngIf="format==='image' && url" height="200"> <br/>
<video [src]="url" *ngIf="format==='video' && url" height="200" controls></video> <br/>
<input type='file' (change)="onSelectFile($event)" />

onSelectFile(event) {
  const file = event.target.files && event.target.files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    if(file.type.indexOf('image')> -1){
      this.format = 'image';
    } else if(file.type.indexOf('video')> -1){
      this.format = 'video';
    }
    reader.onload = (event) => {
      this.url = (<FileReader>event.target).result;
    }
  }
}

Обновлен Stackblitz: https://stackblitz.com/edit/angular-video-or-image-upload-preview-fjsukm

...