在angular中实现图片/视频的预览
需要预览功能的ts文件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test-upload-file',
templateUrl: './test-upload-file.component.html',
styleUrls: ['./test-upload-file.component.css']
})
export class TestUploadFileComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
//图片视频选择并预览
public imagePath:any;
imgURL: any;
videoURL: any;
fileChange(files:any) {
// console.log(files.files);
// console.log(files.files.length);
if (files.files.length === 0) {
return;
}
const reader = new FileReader();
this.imagePath = files.files;
if(files.files[0].type=='image/jpeg'){
reader.readAsDataURL(files.files[0]);
reader.onload = () => {
this.imgURL = reader.result;
};
}
if(files.files[0].type=='video/mp4'){
reader.readAsDataURL(files.files[0]);
reader.onload = () => {
this.videoURL = reader.result;
};
}
该组件的html文件
<div>
<input type="file" accept="image/*" (change)="fileChange($event.target)">
<img *ngIf="imgURL" [src]="imgURL" >
</div>
<div>
<input type="file" accept="video/*" (change)="fileChange($event.target)">
<video id="v1" autoplay loop muted>
<source *ngIf="videoURL" [src]="videoURL" type="video/mp4">
</video>
</div>
效果图：
存在的不足：
1.本代码没有上传到服务器的功能，需要自行添加。
2.上传视频时有时会出现不进行预览的问题。
参考的网站：https://segmentfault.com/a/1190000020169857
