时间戳

首页 > 解决方案 > 出现错误类型错误：this.fileUpload.upload 不是函数

angular - 出现错误类型错误：this.fileUpload.upload 不是函数

问题描述

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

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)
    );
  }

标签： angularangular8

解决方案

问题在下面一行：

this.fileUpload = res;

调用方法后，您将响应存储到服务对象，在这种情况下，它将没有任何upload方法。

因此，在 Component.TS 中声明一个变量：

response : any;

并替换这一行：

this.fileUpload = res;

和

this.response = res;

并在任何地方使用它。

推荐阅读