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

Question

我知道有类似的问题，但 none 涵盖了 Angular 5 的方法，或者至少不是以我理解的方式。

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

HTML:

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

Angular:

export class ImageUpload {
    currentInput;

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

无论是否有附加文件，"currentInput" 中的值始终未定义。当类型等于 "file" 时，它如何处理输入？

谢谢！

Answer 1

试试下面的方法

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

Answer 2

给输入框起个名字，要求是：https://angular.io/guide/forms#!#ngModel。此外，您已经在 class 之外定义了函数。函数和属性都需要在 class.

中

更新：文件输入类型不支持数据绑定。需要使用纯 javascript.

来完成

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

export class ImageUpload {
  currentInput:any;
  onFileSelected(event) {
    console.log(event.target.files);
    this.currentInput = event.target.files; 
  }
}

Answer 3

试试下面的代码。它使用事件发射器侦听输入更改和 returns 文件对象及其元数据。试试看。我喜欢的是你不需要外部库。

//In your component, create a function that emits an event on file selected
import {Component, OnInit, EventEmitter} from '@angular/core';

public onFileSelected(event: EventEmitter<File[]>) {
    const file: File = event[0];
    console.log(file);
}

// In your html, attach the function to the input tag like so
<input type="file" id="file" (change)="onFileSelected($event)">

Answer 4

@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);
    }
}

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

Angular 5 how to get file name from input with type = file

image

input

ngmodel

angular