【bug】file Upload. when status == uploading,go away this page.TypeError: Cannot read property 'unsubscribe' of undefined

[suncongc]

Version

1.6.0

Environment

angular 6.0

Reproduction link

none

Steps to reproduce

<nz-upload class="avatar-uploader"
nzAction="https://jsonplaceholder.typicode.com/posts/"
nzName="avatar"
nzListType="picture-card"
[nzShowUploadList]="false"
[nzBeforeUpload]="beforeUpload"
(nzChange)="handleChange($event)">
<ng-container *ngIf="!avatarUrl">

Upload

<img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">

What is expected?

upaloading , can leave this. page

What is actually happening?

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
at ng-zorro-antd.js:36961
at Array.forEach ()
at NzUploadBtnComponent.push../node_modules/ng-zorro-antd/fesm5/ng-zorro-antd.js.NzUploadBtnComponent.abort (ng-zorro-antd.js:36960)
at NzUploadBtnComponent.push../node_modules/ng-zorro-antd/fesm5/ng-zorro-antd.js.NzUploadBtnComponent.ngOnDestroy (ng-zorro-antd.js:37010)
at callProviderLifecycles (core.js:9573)
at callElementProvidersLifecycles (core.js:9541)
at callLifecycleHooksChildrenFirst (core.js:9531)
at destroyView (core.js:10593)
at callViewAction (core.js:10719)
at execEmbeddedViewsAction (core.js:10662)
at ng-zorro-antd.js:36961
at Array.forEach ()
at NzUploadBtnComponent.push../node_modules/ng-zorro-antd/fesm5/ng-zorro-antd.js.NzUploadBtnComponent.abort (ng-zorro-antd.js:36960)
at NzUploadBtnComponent.push../node_modules/ng-zorro-antd/fesm5/ng-zorro-antd.js.NzUploadBtnComponent.ngOnDestroy (ng-zorro-antd.js:37010)
at callProviderLifecycles (core.js:9573)
at callElementProvidersLifecycles (core.js:9541)
at callLifecycleHooksChildrenFirst (core.js:9531)
at destroyView (core.js:10593)
at callViewAction (core.js:10719)
at execEmbeddedViewsAction (core.js:10662)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500)
at ZoneTask.invoke (zone.js:485)

Other?

上传图片中，离开页面，报错

[suncongc]

plz

[lininu]

遇到相同狀況，目前手動排除

<nz-upload class="avatar-uploader"
  #nzUploader
  [nzName]="imgInput.name"

  @ViewChild('nzUploader') nzUploader: NzUploadComponent;
  ...
  ...
  handleUploadChange = (item: UploadXHRArgs) => {
    item.onSuccess = (ret: any, file: UploadFile, xhr: any) => {
     ...
      nzUploader.upload.reqs = {};
    }
  }

[lininu]

Other?

上传图片中，离开页面，报错

中途離開報錯，看你要不要像我上面那篇，在 onDestroy 下 nzUploader.upload.reqs = {}; 或去 try catch NzUploadComponent 的 reqs 是否尚未 unsubscribe，沒有的話你幫他 unsubscribe，再 nzUploader.upload.reqs = {};

[suncongc]

Other?

上传图片中，离开页面，报错

中途離開報錯，看你要不要像我上面那篇，在 onDestroy 下 nzUploader.upload.reqs = {}; 或去 try catch NzUploadComponent 的 reqs 是否尚未 unsubscribe，沒有的話你幫他 unsubscribe，再 nzUploader.upload.reqs = {};

thanks,很管用

[cipchk]

@lininu @suncongc HI，各位，我无法复现这一现象，以下是我的GIF：

事实上，我检查过所有代码，在 ngOnDestroy 已经做过相应处理。麻烦提供你们的环境或通过 stackblitz 得以复现的示例。

[lininu]

@cipchk
https://stackblitz.com/edit/angular-nz-zorro-antd-uploader
先切到Uploader檔案上傳，成功了再切回Home，可以看到他雖然已經unsubscribe request，但key沒有砍，導致他看最後 ngOnDestroy 去針對key逐個 unsubscribe 的時候error
（雖然跟原文的例子不太一樣，但結果相同）

[cipchk]

@lininu 自定义 nzCustomRequest 请求，建议应该按文档返回相应的值，例如上面更改为：

    item.onSuccess = (ret: any, file: UploadFile, xhr: any) => {
      console.log(ret, file);
    }
    
    return this.api.upload(formData, item);

应该就能正确得到。

这个 issues 虽然增加一个判断就可以修复它，但是我不建议修复它（但是可以增加一个警告，务必返回一个有效值 ），因为无法保证有效参数数据而得到正确的响应并不是很友好的。 @vthinkxie

另 @suncongc 是否也是类似情况？

[lininu]

@lininu 自定义 nzCustomRequest 请求，建议应该按文档返回相应的值，例如上面更改为：

    item.onSuccess = (ret: any, file: UploadFile, xhr: any) => {
      console.log(ret, file);
    }
    
    return this.api.upload(formData, item);

应该就能正确得到。

这个 issues 虽然增加一个判断就可以修复它，但是我不建议修复它（但是可以增加一个警告，务必返回一个有效值 ），因为无法保证有效参数数据而得到正确的响应并不是很友好的。 @vthinkxie

另 @suncongc 是否也是类似情况？

確實是沒有返還給 nzCustomRequest 所造成的問題，感謝！

[suncongc]

i do not und