Не удается прочитать свойство 'target' из undefined - Ioni c Angular

Question

Что я делаю не так, чтобы получить эту ошибку?

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.page.html',
  styleUrls: ['./uploader.page.scss'],
})
export class UploaderPage implements OnInit {

  imageURL: string
  constructor(public http: HttpClient) { }

  ngOnInit() {
  }

  fileChanged(event) {
    const files = event.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('UPLOADCARE_STORE', '1')
    data.append('UPLOADCARE_PUB_KEY', 'my key')

    this.http.post('https://upload.uploadcare.com/base/', data).subscribe(event => {
      console.log(event)
      this.imageURL = event.json().file
    })
  }


}

Но когда я загружаю фотографию, я получаю эту ошибку, а также я получаю сообщение об ошибке, что json не существует для типа 'Объект'

ОШИБКА TypeError: Невозможно прочитать свойство 'target' undefined в UploaderPage.fileChanged (uploader.page.ts: 16) в Object.eval [as handleEvent] (UploaderPage.ngfactory. js: 26) в Object.handleEvent (core. js: 43993) в Object.handleEvent (core. js: 44774) в dispatchEvent (core. js: 29804) в core. js: 42925 в HTMLInputElement. (платформа-браузер. js: 2668) в ZoneDelegate.invokeTask (zone-evergreen. js: 391) в Object.onInvokeTask (core. js: 39680) в ZoneDelegate.invokeTask (zone-evergreen. js: 390)

РЕДАКТИРОВАНИЕ: Это HTML "абонент"

<ion-header>
  <ion-toolbar>
    <ion-title>Upload Image</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div class="camera"> </div>
  <input type="file" (change)="fileChanged()"/>

  <img *ngIf="imageURL" src="https://ucarecdn.com/{{ imageURL}}/"/>
</ion-content>

ОБНОВЛЕНИЕ Первая часть проблемы, которую я исправил, alexortizl (принятый ответ ниже).

Часть json, которую я исправил из этого источника , где я просто необходимо удалить json .parse, поскольку URL-адрес уже был в формате json.

Answer 1

event не определено в fileChanged, потому что оно не передается при возникновении события. Вам нужно передать полезную нагрузку события в HTML:

<input type="file" (change)="fileChanged($event)"/>

Это синтаксис angular, здесь $event - это переменная с объектом Event, вызванным событием change.