【NG-ZORRO】nz-upload上传状态500时,无法获取返回数据

解决:

查找官网,使用nzCustomRequest方法自定义自己的上传实现

获取 HttpErrorResponse 返回 onError 状态

完整代码

  customReq = (item: UploadXHRArgs) => {
    // Create a FormData here to store files and other parameters.
    const formData = new FormData();
    // tslint:disable-next-line:no-any
    formData.append('file', item.file as any);
    formData.append('id', '1000');
    const req = new HttpRequest('POST', item.action!, formData, {
      reportProgress: true,
      withCredentials: true
    });
    // Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.
    return this.http.request(req).subscribe(
      // tslint:disable-next-line no-any
      (event: HttpEvent<any>) => {
        if (event.type === HttpEventType.UploadProgress) {
          if (event.total! > 0) {
            // tslint:disable-next-line:no-any
            (event as any).percent = (event.loaded / event.total!) * 100;
          }
          item.onProgress!(event, item.file!);
        } else if (event instanceof HttpResponse) {
          item.onSuccess!(event.body, item.file!, event);
        } else if (event instanceof HttpErrorResponse){
		  item.onError!(event.error, item.file!);
        }
      },
      err => {
        item.onError!(err, item.file!);
      }
    );
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
NG-ZORROUpload 组件提供了多种方式来调用接口,以下是其中两种常见的方式: 1. 通过 nzBeforeUpload 属性设置上传前的回调函数,在回调函数中通过 HttpClient 发送请求,示例如下: ``` <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzBeforeUpload]="beforeUpload"> <button nz-button> <i nz-icon nzType="upload"></i><span>Upload</span> </button> </nz-upload> beforeUpload = (file: File) => { const formData = new FormData(); formData.append('file', file); this.http.post('your-upload-api-url', formData).subscribe(res => { console.log(res); }); return false; }; ``` 2. 通过 nzCustomRequest 属性设置自定义的上传方法,示例如下: ``` <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzCustomRequest]="customUpload"> <button nz-button> <i nz-icon nzType="upload"></i><span>Upload</span> </button> </nz-upload> customUpload = (item: UploadXHRArgs) => { const formData = new FormData(); formData.append('file', item.file as any); const req = new HttpRequest('POST', 'your-upload-api-url', formData, { reportProgress: true }); return this.http.request(req).subscribe((event: HttpEvent<any>) => { if (event.type === HttpEventType.UploadProgress) { if (event.total > 0) { // 计算上传进度 const percent = (event.loaded / event.total) * 100; item.onProgress(percent, event); } } else if (event instanceof HttpResponse) { // 上传成功 item.onSuccess(event.body, event); } }, error => { // 上传失败 item.onError(error.statusText, item.file); }); }; ``` 需要注意的是,以上示例中的 `your-upload-api-url` 需要替换成实际的上传接口地址。同,还需要根据实际情况对上传的请求参数进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值