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 никогда не вызываются?

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>