通过ng2-file-upload选择图片后立即显示的方法如下:
import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent {
public uploader: FileUploader = new FileUploader({ url: 'your-upload-url' });
}
<input type="file" ng2FileSelect [uploader]="uploader" (change)="onFileSelected($event)" />
<img [src]="selectedImage" *ngIf="selectedImage" />
public selectedImage: string;
onFileSelected(event: any): void {
if (event.target.files && event.target.files.length) {
const reader = new FileReader();
reader.onload = (e: any) => {
this.selectedImage = e.target.result;
};
reader.readAsDataURL(event.target.files[0]);
}
}
以上代码的逻辑是,当用户选择文件后,通过FileReader将文件转换为Base64编码的字符串,并将其赋值给selectedImage变量。然后,在HTML模板中使用ngIf指令判断selectedImage是否存在,如果存在则显示图片。
这样,当用户选择图片后,就会立即显示在页面上。
推荐的腾讯云相关产品:对象存储(COS)。
请注意,以上答案仅供参考,具体实现方式可能因项目需求和技术选型而有所不同。
领取专属 10元无门槛券
手把手带您无忧上云