无法从 Angular 8 中的 Azure Blob 存储中获取 Blob答案

【问题标题】：Unable to get blob from Azure Blob Storage in Angular 8无法从 Angular 8 中的 Azure Blob 存储中获取 Blob
【发布时间】：2020-05-19 10:31:30
【问题描述】：

我正在使用 Angular 8 并尝试从 Azure Blob 存储中保存和下载文件。我已经成功实现了保存文件（uploadFile 效果很好），但在尝试获取文件时遇到了问题（downloadFile()），因为downloadResponse.readableStreamBody 是undefined。

下面是代码：

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import * as AzureStorage from '@azure/storage-blob';
import {BlockBlobURL, ContainerURL} from '@azure/storage-blob';

@Injectable({
  providedIn: 'root',
})
export class AzureBlobService {
  containerURL: ContainerURL;

  constructor(private readonly http: HttpClient) {
  }


  async uploadFile(CONNECT_STR: string, file: File) {
    this.containerURL = await new AzureStorage.ContainerURL(
      CONNECT_STR,
      AzureStorage.StorageURL.newPipeline(
        new AzureStorage.AnonymousCredential()
      )
    );
    const blockBlobUrl = BlockBlobURL.fromContainerURL(this.containerURL, file.name);
    try {
      const upload = AzureStorage.uploadBrowserDataToBlockBlob(
        AzureStorage.Aborter.none,
        file,
        blockBlobUrl
      );
      await upload;
      return Promise.resolve(upload);
    } catch (error) {
      return Promise.resolve(null);
    }
  }

  async downloadFile(CONNECT_STR: string, fileName: string) {
    const containerURL = await new AzureStorage.ContainerURL(
      CONNECT_STR,
      AzureStorage.StorageURL.newPipeline(
        new AzureStorage.AnonymousCredential()
      ));
    const blockBlobURL = BlockBlobURL.fromContainerURL(containerURL, fileName);
    const downloadResponse = await blockBlobURL.download(AzureStorage.Aborter.none, 0);
    return downloadResponse.readableStreamBody;
  }

package.json:

  "dependencies": {
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.7",
    "@angular/compiler": "~8.2.7",
    "@angular/core": "~8.2.7",
    "@angular/platform-browser": "~8.2.7",
    "@angular/router": "~8.2.7",
    "@azure/storage-blob": "^10.3.0",

我以此为参考：https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-javascript-client-libraries-v10

感谢您对此的任何帮助

【问题讨论】：

标签： angular azure-blob-storage angular8

【解决方案1】：

以下代码对我有用：

代码：

  async downloadFile(CONNECT_STR: string, fileName: string) {
    const containerURL = await new AzureStorage.ContainerURL(
      CONNECT_STR,
      AzureStorage.StorageURL.newPipeline(
        new AzureStorage.AnonymousCredential()
      ));
    const blockBlobURL = BlockBlobURL.fromContainerURL(containerURL, fileName);
    const downloadResponse = await blockBlobURL.download(AzureStorage.Aborter.none, 0);
    return downloadResponse.blobBody;
  }

我在 Azure 代码中阅读了以下帮助文档评论：

在 Node.js 中，数据以可读流 readableStreamBody 的形式返回

在浏览器中，数据以承诺 blobBody 的形式返回

【讨论】：