Angular 2读取输入文件

Question

我想了解如何在Angular 2中使用输入文件。在下面的示例中，我想让我的控制台记录我上传的文件的名称。不幸的是，这段代码发送错误Cannot read property 'target' of undefined。

我component.html

<input 
    id="imageUpload" 
    type="file" 
    (change)="imageRun(input)"/> 

我component.ts

imageRun(input){ 
    var files = input.target.files[0]; 
    console.log(files.name); 
} 

我是否有这个问题的角度具体的解决方案不确定，因为我已经运行到同样的问题，当在普通的JavaScript这样做。我查看了一些简单的JS教程，它们都使用JS中的addEventListener方法，而不是在HTML中分配这些触发器。但据我了解，这些方法并不适用于Angular 2项目。

作为参考，这里是an example在普通JavaScript中使用几乎相同的东西，并在src脚本中使用addEventListener。

Answer 1

您可以在inpit文件元素上定义本地模板变量&在组件中使用它。

<Input #myInput 
    id="imageUpload" 
    type="file" 
    (change)="imageRun(myInput)"/> 

imageRun(input){ 
    var file = myInput.files[0]; 
    console.log(file.name); 
}