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

我不确定是否有针对此问题的Angular特定解决方案，因为我在使用普通javascript时遇到了同样的问题。我已经查看了一些简单的JS教程，这些教程都让我使用JS中的addEventListener方法，而不是在HTML中分配这些触发器。但据我所知，这些方法并不适用于Angular 2项目。

作为参考，这里是an example在纯JavaScript中做同样的事情，并在src脚本中使用addEventListener。

Answer 1

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

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

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

Angular 2读取输入文件

1 个答案: