如何使用 v10 SDK 将图像上传到 Azure Blob 存储？答案

【问题标题】：How to upload an image to Azure Blob Storage with v10 SDK?如何使用 v10 SDK 将图像上传到 Azure Blob 存储？
【发布时间】：2019-10-01 04:33:37
【问题描述】：

我正在尝试使用 Angular 中的 SDK V10 在 Microsoft Azure 的 Blob 存储上上传图像。

以下是我目前用来连接存储并列出所有容器名称的代码：

// connect to the Blob Service
const pipeline = StorageURL.newPipeline(new AnonymousCredential(), {
    retryOptions: { maxTries: 4 },
    telemetry: { value: "HighLevelSample V1.0.0" }
});

const serviceURL = new ServiceURL(
    `${this.blobUri}/${environment.azureContainers.sasToken}`,
    pipeline
);

// List containers
let marker;
do {
    const listContainersResponse: Models.ServiceListContainersSegmentResponse = await serviceURL.listContainersSegment(
      Aborter.none,
      marker
    );

    marker = listContainersResponse.nextMarker;
      for (const container of listContainersResponse.containerItems) {
        console.log(`Container: ${container.name}`);
      }
} while (marker);

现在我想在列出的容器之一中上传一个文件（特别是图像）（对于这个问题而言，哪个容器无关紧要），但从我在documentation 中读到的内容来看，需要文件路径，但我没有。我所拥有的是 JS 中“文件”类型的对象，据我所知，由于安全原因，无法从浏览器获取文件路径！

您知道如何实现这一目标吗？如何将图像上传到 Angular 中的 Blob 存储？

【问题讨论】：

标签： angular azure azure-blob-storage

【解决方案1】：

您提到的示例是针对可以访问文件系统的 Node JS。要在浏览器中上传文件，您需要使用uploadBrowserDataToBlockBlob 方法。

来自samples link

  // Parallel uploading a browser File/Blob/ArrayBuffer in browsers with uploadBrowserDataToBlockBlob

  const browserFile = document.getElementById("fileinput").files[0];
  await uploadBrowserDataToBlockBlob(Aborter.none, browserFile, blockBlobURL, {
    blockSize: 4 * 1024 * 1024, // 4MB block size
    parallelism: 20, // 20 concurrency
    progress: ev => console.log(ev)
  });

【讨论】：