@angular/common/http#HttpEventType TypeScript Examples

public upload(files: Set<File>, s3uploadPath: string, s3policy: any, CCMaxAge: string): { [key: string]: Observable<number> } {
        const status = {}; // observables map
        let maxAge = CCMaxAge;
        if (!maxAge || maxAge === '') { maxAge = '259200'; }
        files.forEach(file => {
            const formData: FormData = new FormData();
            formData.append('Content-Type', file.type);
            // tslint:disable-next-line: forin
            for (const f in s3policy.fields) { formData.append(f, s3policy.fields[f]); } // inherit all fields from policy
            formData.append('ACL', 'public-read'); // must appear before file contents!
            formData.append('Cache-Control', 'max-age=' + maxAge);
            const targetFilename = s3uploadPath + file.name;
            console.log('upload', targetFilename);
            formData.append('key', targetFilename);
            formData.append('file', file); // , file.name);

            const req = new HttpRequest('POST', s3policy.url, formData, { reportProgress: true });
            const progress = new Subject<number>();

            // IMPORTANT: exclude POST upload URL from httpinterceptor!!
            this.http.request(req).subscribe(event => {
                if (event.type === HttpEventType.UploadProgress) {
                    const percentDone = Math.round((100 * event.loaded) / event.total);
                    progress.next(percentDone); // update progress bar
                } else if (event instanceof HttpResponse) {
                    progress.complete(); // done uploading this file
                }
            });

            status[file.name] = {
                progress: progress.asObservable(),
                s3key: targetFilename,
                nm: file.name
            };
        });
        return status;
    }

send() {
    (this._original ? of(null) : this.compress()).pipe(
      mergeMap(() => this.injector.get(ChatRecordService).sendImage(this.chatroomId, this._file, this.tempId))
    ).subscribe((event: HttpEvent<Result<Message<ImageMessage>>>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          this.track();
          break;

        case HttpEventType.UploadProgress:
          const { total, loaded } = event;
          if (total > 0) {
            this.percent = +(loaded / total * 100).toFixed(); // 计算进度
          }
          break;

        case HttpEventType.Response:
          // do something...
          break;
      }
    });
  }

onFileChange(fileEvent) {
		if (fileEvent.target.files.length > 0) {
			const file = fileEvent.target.files[0];

			const formData: FormData = new FormData();
			formData.append('file', file, file.name);

			this.http.post('/api/v1/storage/upload', formData, {
				reportProgress: true,
				observe: 'events',
				params: {
					key: this.key,
				},
				headers: {
					'X-FileName': file.name,
				}
			})
				.pipe(takeUntil(this.componentDestroyed$))
				.subscribe((event: HttpEvent<any>) => {
					switch (event.type) {
						case HttpEventType.Sent:
							this.isUploading = true;
							break;
						case HttpEventType.UploadProgress:
							this.uploadProgress = Math.round(event.loaded / event.total * 100);
							break;
						case HttpEventType.Response:
							this.propagateChange(event.body.url);
							this.control.setValue(event.body.url);
							this.isUploading = false;
							this.uploadProgress = 0;
					  }
				});
		}
	}

private getEventMessage(event: HttpEvent<any>, file: WlFile) {
    let message = '';
    switch (event.type) {
      case HttpEventType.Sent:
        message = `Uploading file "${file.name}" of size ${file.size}.`;
        break;

      case HttpEventType.UploadProgress:
        // Compute and show the % done:
        const percentDone = Math.round(100 * event.loaded / event.total);
        message = `File "${file.name}" is ${percentDone}% uploaded.`;
        break;

      case HttpEventType.Response:
        message = `File "${file.name}" was completely uploaded!`;
        break;

      default:
        message = `File "${file.name}" surprising upload event: ${event.type}.`;
    }

    this.logger.debug(message);
    return event;
  }

// 登录过期拦截
  private loginExpiredFn(req: HttpRequest<string>, next: HttpHandler): NzSafeAny {
    return switchMap((event: HttpResponse<NzSafeAny>): NzSafeAny => {
      if (event.type !== HttpEventType.Response || event.body.code !== loginTimeOutCode) {
        return of(event);
      }
      if (event.body.code === tokenErrorCode) {
        this.loginOut();
        return;
      }

      if (this.refresher) {
        return this.sendRequest(req, next);
      }

      this.refresher = new Observable((observer) => {
        // setTimeout为了解决刷新页面的时候，由于zorro样式未加载，登录对话框会闪屏
        setTimeout(() => {
          this.loginModalService.show({nzTitle: '登录信息过期，重新登录'}).subscribe(({modalValue, status}) => {
            if (status === ModalBtnStatus.Cancel) {
              // 这么做是为了登录状态下token过期，刷新页面，登录窗口点击取消，需要在startUp中的获取menu的接口完成掉,
              // 不然进不去angular应用，路由不跳转
              observer.next(new HttpResponse({
                body: {
                  code: 3013,
                  msg: '取消后请重新登录',
                  data: null
                }
              }));
              this.loginOut();
              return;
            }
            const token = modalValue;
            this.loginInOutService.loginIn(token).then();
            this.http.request(req).subscribe((data: NzSafeAny) => {
              this.refresher = null;
              observer.next(data);
            }, error => {
              // 如果先用admin登录超时弹框，登录的却是normal账号，对目标模块没有权限，则返回登录页
              // 这里靠后端判断新的token没有权限，请求报错403
              this.message.error('您没有权限登录该模块');
              this.loginOut();
            });
          });
        }, 100)
      }).pipe(share(), finalize(() => this.refresher = null));
      return this.refresher;
    });
  }

describe("download", () => {
  it("should transform HTTP download & save", done => {
    const request = new Subject<HttpEvent<Blob>>();
    const blob = new Blob();
    const saver = createSpy("saver");
    request.pipe(download(saver), toArray()).subscribe(downloads => {
      expect(downloads).toEqual([
        { progress: 0, state: "PENDING", content: null },
        { progress: 1, state: "IN_PROGRESS", content: null },
        { progress: 50, state: "IN_PROGRESS", content: null },
        { progress: 100, state: "IN_PROGRESS", content: null },
        { progress: 100, state: "DONE", content: blob }
      ]);
      expect(saver).toHaveBeenCalledWith(blob);
      done();
    });
    request.next({ type: HttpEventType.Sent });
    request.next({
      type: HttpEventType.User
    });
    request.next({
      type: HttpEventType.DownloadProgress,
      loaded: 12,
      total: 1024
    });
    request.next({
      type: HttpEventType.DownloadProgress,
      loaded: 512,
      total: 1024
    });
    request.next({
      type: HttpEventType.User
    });
    request.next({
      type: HttpEventType.DownloadProgress,
      loaded: 1024,
      total: 1024
    });
    request.next({
      type: HttpEventType.DownloadProgress,
      loaded: 1024
    });
    request.next(
      new HttpResponse({
        body: blob,
        status: 200,
        url: "/downloads/file.pdf"
      })
    );
    request.complete();
  });
});

export function isHttpResponse<T>(
  event: HttpEvent<T>
): event is HttpResponse<T> {
  return event.type === HttpEventType.Response;
}

export function isHttpProgressEvent(
  event: HttpEvent<unknown>
): event is HttpProgressEvent {
  return (
    event.type === HttpEventType.DownloadProgress ||
    event.type === HttpEventType.UploadProgress
  );
}

describe('upload', () => {
  it('should transform HTTP upload', done => {
    const request = new Subject<HttpEvent<unknown>>()
    request.pipe(upload(), toArray())
      .subscribe(uploads => {
        expect(uploads).toEqual([
          {progress: 0, state: 'PENDING'},
          {progress: 1, state: 'IN_PROGRESS'},
          {progress: 50, state: 'IN_PROGRESS'},
          {progress: 100, state: 'IN_PROGRESS'},
          {progress: 100, state: 'DONE'}
        ])
        done()
      })
    request.next({type: HttpEventType.Sent})
    request.next({
      type: HttpEventType.User,
    })
    request.next({
      type: HttpEventType.UploadProgress,
      loaded: 12,
      total: 1024
    })
    request.next({
      type: HttpEventType.UploadProgress,
      loaded: 512,
      total: 1024
    })
    request.next({
      type: HttpEventType.User,
    })
    request.next({
      type: HttpEventType.UploadProgress,
      loaded: 1024,
      total: 1024
    })
    request.next({
      type: HttpEventType.UploadProgress,
      loaded: 1024
    })
    request.next(new HttpResponse({
      status: 200,
      url: '/uploads/file.pdf'
    }))
    request.complete()
  })
})