Angular 5如何从类型=文件的输入中获取文件名

Question

我知道有类似的问题，但没有一个涵盖Angular 5的方法，或者至少没有以我理解的方式涵盖。

对于我的图像上传系统，我需要知道是否在输入标签上附加了图片以及文件的名称。这是我的代码：

HTML：

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

角度：

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

无论是否附加文件，“ currentInput”中的值始终是不确定的。当类型等于“文件”时，如何处理输入？

谢谢！

Answer 1

尝试以下方式

onFileSelected(event) {
 if(event.target.files.length > 0) 
  {
    console.log(event.target.files[0].name);
  }
}

Answer 2

@ramesh-rajendran 的回答很好。如果您想要 TypeScript 解决方案：

onFileSelected(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
        console.log(target.files[0].name);
    }
}