Angular 为什么HttpEventType.UploadProgress事件在角度文件上载请求中执行一次？

我正在尝试从angular上传文件。我也想展示一下上传进度

upload.service.ts

public uploadProductImage(obj: FormData, id: string) {
    return this._http.post(baseUrl + `/product/upload`, obj, {
      headers: {
        product_id: id,
      },
      reportProgress : true,
      observe : 'events'
    });
  }

uploadClick() {
    const fd = new FormData();

    // for(const f of this.file_url) {
    //   fd.append('image', f.file, f.file.name);
    // }
    fd.append('image', this.file_url[0].file, this.file_url[0].file.name);
    this.service.uploadProductImage(fd, this.product_id.toString())
      .subscribe(
        event => {
          if (event.type === HttpEventType.UploadProgress) {
            console.log(event.loaded, event.total);
            this.progress = Math.round(event.loaded / event.total * 100);

          } else if (event.type === HttpEventType.Response) {
            console.log(event.body);
            this.file_url = [];
          }

        },
        err => {
          console.log(err);
        }
      );
  }

上传.component.ts

public uploadProductImage(obj: FormData, id: string) {
    return this._http.post(baseUrl + `/product/upload`, obj, {
      headers: {
        product_id: id,
      },
      reportProgress : true,
      observe : 'events'
    });
  }

uploadClick() {
    const fd = new FormData();

    // for(const f of this.file_url) {
    //   fd.append('image', f.file, f.file.name);
    // }
    fd.append('image', this.file_url[0].file, this.file_url[0].file.name);
    this.service.uploadProductImage(fd, this.product_id.toString())
      .subscribe(
        event => {
          if (event.type === HttpEventType.UploadProgress) {
            console.log(event.loaded, event.total);
            this.progress = Math.round(event.loaded / event.total * 100);

          } else if (event.type === HttpEventType.Response) {
            console.log(event.body);
            this.file_url = [];
          }

        },
        err => {
          console.log(err);
        }
      );
  }

现在图像上传正在工作。只有进度条不工作。我得到一个带有

HttpEventType.UploadProgress

立即和

event.loaded

和

event.total的事件。两者相等

因此progressbar直接变为
100
，但完成请求需要一些时间。
我也遇到了同样的问题。对我来说，服务器在本地主机上，因此上传是即时的，进度总是100%。
尝试在Chrome中限制请求，在上传完成之前，您将看到其他一些进度百分比


在Chrome中控制网络的步骤如下：

打开开发工具（F12）
单击“网络”选项卡
选择要模拟的连接类型（“慢速3G”即可）
我正在一个新项目中使用这个。它正在工作。希望对你有帮助

import { HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';


uploadMethod() {
        const formData: FormData = new FormData();
        formData.append('file', this.selectedFile);

        const req = new HttpRequest('POST', apiEndpoint, formData, {
          reportProgress: true,
        });

        this.http.request(req)
        .subscribe(
          (event) => {
            if (event.type === HttpEventType.UploadProgress) {
              // This is an upload progress event. Compute and show the % done:
              this.percentDone = Math.round(100 * event.loaded / event.total);
              console.log(`File is ${this.percentDone}% uploaded.`);
            } else if (event instanceof HttpResponse) {
              console.log('File is completely uploaded!');
              console.log(event.body);
            }
          },
          err => console.error(err)
        );
}

对于同样的问题，任何帮助都是值得赞赏的。同样，建议的解决方案是什么？“OP找到了吗？”DARKGuy看到我的答案了。你能找到这个吗useful@RonaldKorze看看我的答案。也许你会发现这很有用