Как загрузить изображение с Angular и PHP

Question

Я новичок в Angular, я пытаюсь загрузить изображение с angular, но получаю 4 ошибки:

1) в методе записи: Не удается найти имя 'formData'. Возможно, вы имели в виду «FormData»? Ts (2552)
2) В методе подписки: const headers: HttpHeaders
Нет перегрузки, которая соответствует этому вызову.
Перегрузка 1 из 5,
3) В методе подписки: Не удается найти имя файла. Вы имели в виду «File»? Ts (2552)
4) In this.url: Type 'string | ArrayBuffer 'не может быть назначен типу
' string '.
Тип' ArrayBuffer 'не может быть назначен типу' string '

Ниже я прилагаю код.

public imagePath;
  constructor(private http: HttpClient) { }
  url: string;
  ngOnInit() {
  }
  onSelectFile(event) 
  { // called each time file input changes
    if (event.target.files && event.target.files[0]) 
    {
        var reader = new FileReader();
        this.imagePath = event.target.files;

        for (const file of this.imagePath) 
        {
          const formData = new FormData();
          formData.append('image', file, file.name);
        }
        const headers = new HttpHeaders();
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');

        this.http.post('http://localhost/imageupload.php', formData).subscribe( headers, console.log(file.name) );

        reader.readAsDataURL(event.target.files[0]); // read file as data url

        reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;

      }
    }
  }

Answer 1

Константы имеют объемную область, у вас нет константы доступа из внешней области видимости (поскольку это ограниченная область)

public imagePath;
  constructor(private http: HttpClient) { }
  url: string;
  ngOnInit() {
  }
  onSelectFile(event) 
  { // called each time file input changes
    if (event.target.files && event.target.files[0]) 
    {
        var reader = new FileReader();
        this.imagePath = event.target.files;

        for (const file of this.imagePath) 
        {
          const formData = new FormData();
          formData.append('image', file, file.name);

          const headers = new HttpHeaders();
          headers.append('Content-Type', 'multipart/form-data');
          headers.append('Accept', 'application/json');

          this.http.post('http://localhost/imageupload.php', formData, { headers }).subscribe(response => console.log(response));

          reader.readAsDataURL(event.target.files[0]); // read file as data url

          reader.onload = (event) => { // called once readAsDataURL is completed
          this.url = event.target.result;
        }
      }
    }
  }