如何使用 C# api 和 Angular 从 Azure Blob 存储获取文件以在浏览器中显示

Question

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

[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);
        }
    }

我的 angular 服务接收不正确：

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。

编辑：删除了 angular 服务代码中的错误处理程序。

回溯调用栈发现：

Answer 1

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

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

downloadProfilePic(): Observable<any> {
  return this.http.get(`${this._url}/downloadProfilePic`, { responseType:'blob' });
}

Answer 2

其实angular服务中不需要下载ProfilePic。如果您只是在 template/html 代码中使用 <img src="<your.api.path.goes.here>"，您的 api 控制器将 return 文件，而无需通过 angular 服务。

如何使用 C# api 和 Angular 从 Azure Blob 存储获取文件以在浏览器中显示

How to get file from Azure Blob Storage to display in the browser using C# api and Angular

angular

httphandler

memorystream

azure-blob-storage

webapi