角度图像/视频预览

Question

我正在尝试以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;
}
}
}

Answer 1

您可以决定文件是否为视频/图像类型，然后将其转发给合适的 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;
}
}
}

更新的堆栈闪电战：https://stackblitz.com/edit/angular-video-or-image-upload-preview-fjsukm