在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

總結

以上是生活随笔為你收集整理的在angular中实现图片/视频的预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。