0

我的api代码返回一个文件，没问题：

[HttpGet("downloadProfilePic")]
    public async Task<FileStreamResult> DownloadProfilePic()
    {
        try
        {
            var containerName = "profilepics";
            string storageConnection = _config.GetSection("StorageConnectionString").Value;

            CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(storageConnection);
            CloudBlobClient blobClient = cloudStorageAccount.CreateCloudBlobClient();
            CloudBlobContainer blobContainer = blobClient.GetContainerReference(containerName);
            CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference((await _userService.GetUserGuid().ConfigureAwait(false)).ToString());

            MemoryStream memoryStream = new MemoryStream();
            await blockBlob.DownloadToStreamAsync(memoryStream).ConfigureAwait(false);
            memoryStream.Position = 0;
            return FileStreamResult(memoryStream, "image/png");
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

我的角度服务没有正确接收：

downloadProfilePic(): Observable<any> {
    return this.http.get<any>(this._url + '/downloadProfilePic');
}

错误拦截器正在触发，我不知道为什么：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
  if (err.status === 401) {
    // auto logout if 401 response returned from api
    this.authenticationService.logout();
    location.reload(true);
  }

  const error = err.error || err.statusText;
  return throwError(error ? error : err);
}))

}

错误截图：在此处输入图像描述

我在这里做错了什么？我想在浏览器中显示这个 memoryStream。

编辑：删除了角度服务代码中的 errorHandler。

追溯调用堆栈并发现：在此处输入图像描述

4

2 回答 2

0

当响应代码在成功范围内但 Xhr 处理程序中仍然发生错误时，您收到的错误是 HttpErrorResponse 设置的一般错误。虽然 JSON 解析可能不是引发此错误的唯一原因，但它很可能也是默认响应的原因。如果 responseType 设置为 'json'，Xhr 处理程序会尝试解析响应，如果没有提供 responseType，这是默认设置。

尝试将响应类型更改为“blob”，因为您正在从服务下载流。

downloadProfilePic(): Observable<any> {
  return this.http.get(`${this._url}/downloadProfilePic`, { responseType:'blob' });
}
于 2020-01-16T19:36:22.460 回答
0

实际上，不需要在角度服务中下载ProfilePic。如果您只是<img src="<your.api.path.goes.here>"在模板/html 代码中使用，您的 api 控制器将返回文件，而无需通过角度服务。

于 2020-01-17T14:41:11.537 回答