HttpEventType.UploadProgress 只被调用一次， event.loaded 和 event.total 相等所以进度立即为 100%

问题描述

我有一个创建新帖子的方法。这篇文章包括上传视频。

createPost(formDirective: FormGroupDirective): void {
 if (
      this.postForm.valid &&
      this.user?.fullName &&
      this.user?.imageUrl &&
      this.filetoUpload
    ) {
      const val = this.postForm.value;
      this.isLoading = true;
      var formData = new FormData();
      formData.append('videoUrl',this.filetoUpload,this.filetoUpload.name);
      formData.append('fullName',this.user.fullName);
      formData.append('imageUrl',this.user.imageUrl);
      formData.append('title',val.title);

      this.postsService
        .createPostWithVideoUpload(formData)
        .subscribe((event) => {
          if (event.type === HttpEventType.UploadProgress && event.total) {
            console.log(event.total,event.loaded);
            this.progress = Math.round((event.loaded / event.total) * 100);
            console.log(`Uploaded! ${this.progress}%`);
          }
          if (event.type === HttpEventType.Response) {
            console.log('Video successfully uploaded!',event.body);
            formDirective.resetForm();
            this.isLoading = false;
            this.filetoUpload = null;
            setTimeout(() => {
              this.progress = 0;
            },1500);
          }
        });
    }
  }

这是我在 PostsService 中的 api 调用方法。我在后端使用 Node.js 和 Express.js，并将视频上传到 Google Cloud Storage。

  createPostWithVideoUpload(data: any) {
    return this.http
      .post<any>(`${this.apiUrl}/post/upload`,data,{
        reportProgress: true,observe: 'events',})
      .pipe(
        map((response) => {
          return response;
        })
      );
  }

我想使用进度条向用户显示上传进度。上传视频工作正常，但进度立即为 100，因为 event.loaded 立即等于 event.total，这不应该是这种情况。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）