使用RxJS中的fromEvent方法将文件选择事件绑定到input元素上。通过这种方式,即使用户多次选择文件,我们也可以得到FileList并使用它。以下是一个简单的示例:
HTML代码:
TypeScript代码: import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; import { fromEvent } from 'rxjs'; import { map } from 'rxjs/operators';
@Component({ selector: 'app-file-upload', templateUrl: './file-upload.component.html', styleUrls: ['./file-upload.component.css'] }) export class FileUploadComponent implements AfterViewInit {
@ViewChild('fileInput') fileInput: ElementRef;
ngAfterViewInit(): void { const fileInputElement = this.fileInput.nativeElement; const fileChange$ = fromEvent(fileInputElement, 'change').pipe(map((event: any) => event.target.files)); fileChange$.subscribe((files: FileList) => { if (files && files.length) { const fileReader = new FileReader(); fileReader.onload = () => { // do something with the file content }; fileReader.readAsText(files[0]); } }); } }