当发生元素数组的POST请求时，如何取消对特定订阅的订阅

Question

我正在创建一个角度14的文件加载程序组件。

要求：用户应该能够取消比预期更长的上传。

实现：

我已经做过的

1. UI和基本逻辑。
2. 所有拖放的文件都存储在数组
3. 中

我的思维过程：

我想，如果我在map上运行droppedFilesArray，并且对于每一项，我都会跨越一个专门的http请求。在UI中，我将在文件名旁边显示一个十字符号，直到我收到来自post的回复。这样，如果特定的上传时间比预期的要长的话，我将能够在点击那个交叉图标时使用unsubscribe。其余的上传将继续正常。

这是我的主意：

​

以下是代码：

  uploadFiles() {
    this.myfiles.forEach((file, i) => {
      setTimeout(() => {
        this.droppedFileArray[i].fileEntry.file((file: File) => {
          if (this.isFileSizeAllowed(file.size)) {
            if (this.files.length < 6) {
              this.fileFound = true;
              const formData = new FormData();
              formData.append('excel', file);
              const headers = new HttpHeaders({
                'x-request-id': 'file_upload_' + new Date().getTime(),
              });
              this.req[i] = this.http
                .post(
                  'http://localhost:8090/core-services/file-upload/upload',
                  formData,
                  {
                    headers: headers,
                    responseType: 'json',
                  }
                )
                .pipe(catchError((err) => this.handleError(err)))
                .subscribe((res: any) => {
                  this.hasError = false;
                  this.filesLoaded = true;
                  this.fileUploading = false;
                  this.showMessage();
                });
            } else {
              this.messageService.add({
                  // 'File limit exceeded. Cannot upload more than 5 files at a time.',
              });
            }
          } else {
            this.messageService.add({
                //  'Max size of a file allowed is 1mb, files with size more than 1mb are discarded.',
            });
          }
        });
      }, i * 4000);
    });
  }

这里是stackblitz：https://stackblitz.com/edit/angular-ivy-r7mrrm

问题是我得到的错误this.req是没有定义的。如果可能的话，也请帮助我掌握更好的逻辑。

Answer 1

req : Array<Subscription> =[];

..。

this.req[i] =  this.http
                .post(
                  'http://localhost:8090/core-services/file-upload/upload',
                  formData,
                  {
                    headers: headers,
                    responseType: 'json',
                  }
                )
                .pipe(catchError((err) => this.handleError(err)))
                .subscribe((res: any) => {
                  this.hasError = false;
                  this.filesLoaded = true;
                  this.fileUploading = false;
                  this.showMessage();
                });

..。您可以通过以下方式停止订阅和http请求：

this.req[i].unsubscribe();