Angular10 Upload 進度條 reportProgress

tags: Angular Upload Progress

Angular 上傳進度條使用

const reqVideo = new HttpRequest(
  'POST',
  '/api/upload/video',
  this.videoFile,
  {
    reportProgress: true,
  }
);

this.http.request(reqVideo).subscribe(
  // event.type 有 Sent = 0 UploadProgress = 1 DownloadProgress = 3 Response = 4
  (event) => {
    if (event.type === HttpEventType.UploadProgress) {
      console.log(event);
      this.uploadVideoPercent = (
        (event.loaded / event.total) *
        100
      ).toFixed(2);

      console.log(this.uploadVideoPercent);
    }
    if (event.type === HttpEventType.Response) {
      console.log(event);
      this.msg.create('success', '上傳影片成功');
      this.addVideoData.video = (event.body as any).url; // (event.body as any) 解決 typescript 沒有先設定 property的問題
      this.uploadVideoSuccess = true;
      this.postVideo();
    }
  },
  (error) => {
    console.log(error.message);
    this.msg.create('waring', '上傳影片失敗');
  }
);