單選圖片顯示

html

<input type="file" (change)="uploadImg($event)">
<img [attr.src]="src" style="width: 300px;">

ts

src = '';

uploadImg(event): void {
const files = (event.target as HTMLInputElement).files;
    if (files && files[0]) {
        const reader = new FileReader();
        reader.onload = (e: any) => {
            this.src = e.target.result;
        };
        reader.readAsDataURL(files[0]);
    }
}

多選圖片顯示

html

<input type="file" multiple (change)="uploadImg($event)">
<ng-container *ngFor="let file of uploadFiles">
    {{file.file.name}}
    <img [attr.src]="file.src" style="width: 300px;">
</ng-container>

ts

uploadFiles: {file: File, src: string}[] = [];

uploadImg(event): void {
    this.uploadFiles = [];
    const files = (event.target as HTMLInputElement).files;

    for (let i = 0; i < files.length; i++) {
        const file = files.item(i);
        if (file) {
            const reader = new FileReader();
            reader.onload = (e: any) => {
                this.uploadFiles.push({
                    file,
                    src: e.target.result
                });
            };
            reader.readAsDataURL(file);
        }
    }
    console.log('upload files', this.uploadFiles);
}