如何从angular中的文件上传服务中提取响应数据

Question

大家好，每个人都在开发上传功能，我们将上传 excel，我将得到我想要提取的响应

我的 API 服务

  uploaduserConfigData(files) {
let token = window.sessionStorage.getItem('jwt');
const URL = 'http://localhost:8080/upload';
const headers = new Headers({'Content-Type': 'application/json'});
headers.append('Authorization', 'Bearer ' + token);
headers.append('Tenant', 'demoDB');

return this.http.post(URL, files, {
  reportProgress: true,
  observe: 'events',
  headers: new HttpHeaders().set('Authorization', 'Bearer ' + token).set('Tenant', 'demoDB')
})
  .pipe(
    catchError(this.handleError)
  );

}

我得到的响应样本

回复截图

{
    "total": 12,
    "repeatedUsers": 1,
    "emailIdError": 1,
    "mobileNoError": 12,
    "designationError": 0,
    "subjectError": 12,
    "fileS3Url": "https://s3.ap-south-1.amazonaws.com/excel/newExcel.xls"
}

但是当我尝试从 JSON 响应中提取总数时，它给出了一个未定义的错误

this.apiService.upload(formData).subscribe((data: any) => {
        if (data.type === HttpEventType.UploadProgress) {
          this.progress = Math.round((100 / files.total) * files.loaded);
          console.log('progress' + this.progress);
        } else if (files.type === HttpEventType.Response) {
          this.progress = null;
        }

        this.userconfigdata = JSON.stringify(data);

        alert(JSON.stringify(this.userconfigdata.total));

      }, error => {
        console.log(error);
      });

未定义的响应

Answer 1

this.userconfigdata已经使用JSON.stringify()序列化。 当您说this.userconfigdata.total时，没有可用的属性total 。 尝试替换语句

alert(JSON.stringify(this.userconfigdata.total));

和

alert(JSON.stringify(data.total));

或者

将 object 分配给成员变量，无需序列化并访问它的属性。

this.userconfigdata = data;
alert(JSON.stringify(this.userconfigdata.total));