获取错误类型错误：this.fileUpload.upload 不是函数

Question

大家好，我实现了一个以角度上传文件的代码，但问题是当我第一次上传文件时，它成功上传，但是当我第二次上传时，它显示以下错误。

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;

并在任何地方使用它。