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

Question

我正在尝试使用 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 中“File”类型的对象，据我所知，由于安全原因，无法从浏览器获取文件路径!

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

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