Получение ОШИБКИ TypeError: this.fileUpload.upload не является функцией

Question

Привет всем, я реализую код для загрузки файла в angular, но проблема в том, что, когда я загружаю файл в первый раз, он успешно загружается, но когда я загружаю второй раз, он показывает ошибку ниже.

EmployeeDetailComponent.html:39 ERROR TypeError: this.fileUpload.upload is not a function
    at EmployeeDetailComponent.uploadFile (employee-detail.component.ts:92)
    at Object.eval [as handleEvent] (EmployeeDetailComponent.html:39)
    at handleEvent (core.js:34789)
    at callWithDebugContext (core.js:36407)
    at Object.debugHandleEvent [as handleEvent] (core.js:36043)
    at dispatchEvent (core.js:22533)
    at core.js:24430
    at SafeSubscriber.schedulerFn [as _next] (core.js:27889)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:185)
    at SafeSubscriber.next (Subscriber.js:124)

А вот мой html код

<form [formGroup]="profileForm" (ngSubmit)="uploadFile()">
      <div class="form-group">
              <input type="file" name="profile"  (change)="onSelectedFile($event)" />
      </div>
      <div class="form-group">
              <button class="btn btn-success">Upload</button>
      </div>
</form>

Файл ts похож.

uploadFile(){
    const formData = new FormData();
    formData.append('profile', this.profileForm.get('profile').value);
    console.log(formData)
    this.fileUpload.upload(formData).subscribe(
      res => {
        this.fileUpload = res;
        console.log(res)
      },
      err => this.error = err,
    );
  }

  onSelectedFile(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.profileForm.get('profile').setValue(file);
    }
  }

, а сервис для загрузки файла:

  upload(formData) {
    return this.http.post<any>(`${this.apiUrl}`, formData, {
      reportProgress: true,
      observe: 'events'
    }).pipe(
      map(event => this.getEventMessage(event, formData)),
      catchError(this.handleError)
    );
  }

Answer 1

Проблема ниже строки:

this.fileUpload = res;

После вызова метода вы сохраняете ответ на объект Сервиса, и в этом случае у него не будет никакого метода upload.

Итак, объявите одну переменную в Component.TS:

response : any;

и просто замените эту строку:

this.fileUpload = res;

на

this.response = res;

и используйте ее где угодно.