在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中实现图片/视频的预览相关推荐

计算机文件预览取消,关闭视频文件预览，保留图片文件预览（windows7） -电脑资料...
Win 7的视频预览是一项不错的功能,但需要高配硬件配置支持,这让不少用户难以取舍, 其实,还可以以采取一个折中的办法,有选择性的关闭某些类型的文件预览,而只留下常见的文件格式预览功能.比如,由于视频 ...
uniapp实现当行多图片点击预览
本文主要讲述从表格数据当行中实现图片点击预览功能 1.首先要先显示当前行数据,tabData是私有的数据,里面包含了图片数据imgs_arr,imgs_arr的数据格式如下我在这遍历了图片数组,其中 ...
Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览
需求 Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏观看,避免用户直接操作返回后导致页面空白(原有消息记录消失 - 重新进入项目首页) [补充] 全屏 ...
Win10文件夹中图片不显示预览图解决方法
Win10文件夹中图片不显示预览图解决方法分享.如果我们在文件夹里面有很多的图片文件,可以通过预览图来快速的找到自己需要的图片.但是有用户却发现电脑文件夹里面图片不会显示缩略图,今天我们一起来看看如何 ...
在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果
通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上 ...
java中上传图片的原理_js实现图片上传预览原理分析
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便.一直以来也就只是用用,没有想过这些插件背后的实现原理.趁着今天有点时间,也来学习学习. 追根溯源设想一开始,按照我 ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
【Android RTMP】Android Camera 视频数据采集预览 ( 视频采集相关概念 | 摄像头预览参数设置 | 摄像头预览数据回调接口 )
文章目录安卓直播推流专栏博客总结一. Android 端数据采集涉及到的相关概念二. Camera 预览图像尺寸设置三. 获取摄像头采集的数据格式安卓直播推流专栏博客总结 Android R ...
怎么关闭计算机右侧的硬盘预览,选择性关闭视频文件预览给Win7硬盘CPU减压
Win7之家( www.win7china.com):选择性关闭视频文件预览给Win7硬盘CPU减压很多朋友的硬盘里面保存了大量的图片和电影,图片的格式基本就是jpg为主,但视频文件可就多了去了. ...
Android 10.0获取本地视频及其预览图
打开本地视频选择器 private void openLocalVideo(){Intent intent = new Intent();intent.setAction(Intent.ACTION_ ...

在angular中实现图片/视频的预览

在angular中实现图片/视频的预览

在angular中实现图片/视频的预览相关推荐

最新文章

热门文章