在Angular中,可以使用FileReader
对象来读取上传文件的信息,并将文件名传递给输入文本框。以下是一个示例解决方法:
首先,在HTML模板中添加一个文件上传输入框和一个输入文本框:
然后,在组件的TypeScript文件中,添加以下代码:
fileName: string;
onFileSelected(event) {
const file: File = event.target.files[0];
if (file) {
this.fileName = file.name;
}
}
在onFileSelected
方法中,我们通过event.target.files[0]
获取选中的文件对象,然后将文件名赋值给fileName
变量。
最后,确保将组件的模块文件中引入FormsModule,以便使用ngModel指令:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
...
})
export class AppModule { }
通过这种方式,当用户选择上传文件后,文件名会自动填充到输入文本框中。