Блог

Я пытаюсь понять, как использовать входной файл с 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, в которых я использую addEventListener метод в JS, вместо того, чтобы назначать эти триггеры в HTML. Но эти методы, насколько я понимаю, на самом деле не применимы к проекту Angular 2.

Для справки, вот пример выполнения практически того же самого в обычном JavaScript и использования addEventListener внутри скрипта src.

Вы можете определить локальную переменную шаблона в элементе inpit file и использовать ее внутри компонента.

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

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