在Angular 9中,可以通过以下步骤实现在点击上传文件前显示图片的功能:
<input type="file" (change)="onFileSelected($event)">
<img *ngIf="imageUrl" [src]="imageUrl" alt="Selected Image">
imageUrl: string;
onFileSelected(event: any) {
const file: File = event.target.files[0];
const reader = new FileReader();
reader.onload = (e: any) => {
this.imageUrl = e.target.result;
};
reader.readAsDataURL(file);
}
这样,当用户选择了一个图片文件后,该图片将会在点击上传文件之前显示在页面上。
关于Angular 9的更多信息和使用方法,可以参考腾讯云的Angular产品文档:Angular产品介绍。
请注意,以上答案仅供参考,具体实现方式可能因项目需求和开发环境而有所不同。
效果
📷
>
📷
欢迎访问博客代码哈士奇
技术 聊天 交流群 974178910
前端交流群 535620886
代码
不显示图片/播放视频音频代码如下
如果想要显示图片/播放视频/播放音频
若使用 请自行优化代码和样式
不显示图片/播放视频音频代码如下
<template>
领取专属 10元无门槛券
手把手带您无忧上云