在Angular中,要展示用户选择的文件,可以使用FileReader对象读取文件内容,并将其赋值给一个变量,然后在HTML模板中显示该变量的值。下面是一个解决该问题的示例代码:
selectedFile: File;
onFileSelected(event): void {
this.selectedFile = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
this.selectedFile = e.target.result;
};
reader.readAsDataURL(this.selectedFile);
}
上述代码中,我们首先在onFileSelected
方法中获取用户选择的文件,并使用FileReader
对象将文件内容读取为数据URL。然后,我们将数据URL赋值给selectedFile
变量。
在HTML模板中,我们使用*ngIf
指令来检查selectedFile
变量是否有值。如果有值,我们将其作为图片的src
属性值来显示选择的文件。
请注意,这只是一个示例代码,你可以根据自己的需求进行调整和优化。