Ошибка типа: не удается прочитать свойство 'post' с неопределенной ошибкой в ​​Angular 7 Загрузить файл

Question

Я новичок в Angular.Моя цель - создать один zip-файл загрузчика и поместить его в папку.Так что мой html код:

<div class="form-group">
          <label for="file">Choose File</label>
          <input type="file" id="file" (change)="handleFileInput($event.target.files)">
        </div>

Мой component.ts код:

handleFileInput(files: FileList) {
      this.fileToUpload = files.item(0);
      alert(this.fileToUpload.type + " " + this.fileToUpload.name + " " + this.fileToUpload.size / 1024);
      this.postFile(this.fileToUpload);
  }

  httpClient: any;
  postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: "yourHeadersConfig" })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}
  handleError(e: any): any {
    alert(e);
  }

на handeFileInput Я правильно получаю всю информацию о файле, имя размер ecc ..Но когда я запускаю метод postFile, я получаю эту ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'post' из undefined в ListCertificatesComponent.push ../ src / app / list-сертификаты /list-certificate.component.ts.ListCertificatesComponent.postFile (list-сертификаты.component.ts: 43) в ListCertificatesComponent.push ../ src / app / list-сертификаты / list-сертификаты.component.ts.ListCertificatesComponent.handleFileInput (список-certificates.component.ts: 34) в Object.eval [как handleEvent] (ListCertificatesComponent.html: 46) в handleEvent (core.js: 21673) в callWithDebugContext (core.js: 22767) в Object.debugHandleEvent [как handleEvent](core.js: 22470) в dispatchEvent (core.js: 19122) в core.js: 19569 в HTMLInputElement.(platform-browser.js: 993) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421)

У меня естьпытаюсь вставить но безуспешно:

import { Http} from '@angular/http';

Спасибо за помощь

Answer 1

Вы используете HttpClient неправильный путь.

Angular - HttpClientModule

Сначала вам нужно будет импортировать HttpClientModule в app.module.ts.

import { HttpClientModule } from '@angular/common/http';

Вам необходимо импортировать и ввестиHttpClient в обслуживании.

import { HttpClient} from '@angular/common/http';

constructor(private httpClient: HttpClient) {}

postFile(fileToUpload: File): Observable<boolean> {
  const endpoint = 'your-destination-url';
  const formData: FormData = new FormData();
  formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
        .post(endpoint, formData, { headers: "yourHeadersConfig" })
        .subscribe((response: any) => { console.log('Response', response); })
        .catch((e) => this.handleError(e));
}

Для получения дополнительной информации см. Следующую ссылку.

Angular - HttpClientModule

Answer 2

введите HttpClient в конструктор вместо использования httpClient: any;

import { HttpClient} from '@angular/common/http';
import {map, catchError} from 'rxjs/Operators';

constructor(
    private httpClient: HttpClient, 
)
postFile(fileToUpload: File): Observable<boolean> {

  return this.httpClient
    .post(endpoint, formData, { headers: "yourHeadersConfig" })
    .pipe (
       map(() => { return true; })
       catchError((e) => this.handleError(e))
     );

}