javascript - HttpEventType 没有得到 ResponseHeader 和 Response

Question

我得到了上传文件的服务，简单的帖子。

我试图从每一步得到回应：

// Upload to server
    this.dragdropService.addFiles(this.form.value.file)
      .subscribe((event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request has been made!');
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header has been received!');
            break;
          case HttpEventType.UploadProgress:
            this.progress = Math.round(event.loaded / event.total * 100);
            console.log(`Uploaded! ${this.progress}%`);
            break;
          case HttpEventType.Response:
            console.log('File uploaded successfully!', event.body);
            setTimeout(() => {
              this.progress = 0;
              this.fileArr = [];
              this.fileObj = [];
              this.msg = "File uploaded successfully!"
            }, 3000);
        }
      })
  }

第一个案例工作正常 - 我得到了

console.log '请求已发出'

但 ResponseHeader 永远不会被调用。然后我收到了 UploadProgress 的回复 - 我得到了

控制台日志：'已上传！100%'

最后我想获得响应以了解文件是否已添加。我也想显示味精'文件上传成功'

为什么从不调用 ResponseHeader 和 Response？

标签： javascriptangulartypescriptangular-httpclient

Answer 1

尝试这个

app.component.ts

import { Component } from '@angular/core';
import { HttpClient, HttpEventType, HttpResponse } from '@angular/common/http';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  percentDone: any = '0%';
  constructor(private _httpClient: HttpClient) {

  }
  ngOnInit(): void {
  }
  uploadFile(event: Event) {
    // console.log(event.target['files'][0]);
    const formData = new FormData();
    formData.append('file', event.target['files'][0]);
    this._httpClient
      .post('https://jsonplaceholder.typicode.com/posts', formData, { reportProgress: true, observe: 'events' })
      .subscribe((response: any) => {
        if (response.type === HttpEventType['UploadProgress']) {
          const percentDone = Math.round(100 * response.loaded / response.total);
          this.percentDone = percentDone;
          if(this.percentDone === 100) {
              this.percentDone = this.percentDone + '%';
            setTimeout(()=> {
              this.percentDone = "Completed..."
          },0)
          } else {
            this.percentDone = this.percentDone + '%';
          }
          console.log(`File is ${percentDone}% uploaded.`);
        } else if (event instanceof HttpResponse) {
          console.log('File is completely uploaded!');
        }
      });
  }
}

app.component.html

<div style="text-align:center;">
    <code>
    File upload with progress <strong>Angular</strong>
  </code>
</div>

<div style="margin-top:100px; text-align: center;">
    <code >
      <input type="file" (change)="uploadFile($event)" class="custom-file-input"><br>
    <strong style="font-size:20px;">{{percentDone}}</strong>
  </code>
</div>