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

最新推荐文章于 2022-11-26 19:46:22 发布

W_jin

最新推荐文章于 2022-11-26 19:46:22 发布

阅读量864

点赞数

分类专栏：第三方插件文章标签： NG-ZORRO

本文链接：https://blog.youkuaiyun.com/W_jin/article/details/120744070

版权

第三方插件专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用nzCustomRequest方法实现自定义文件上传，并处理HttpErrorResponse，包括上传进度、成功响应和错误回调。通过实例代码展示了关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决：

查找官网，使用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!);
      }
    );
  }