Angular 如何使用v10 SDK将映像上载到Azure Blob存储？

我正在尝试使用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);

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

你知道如何做到这一点吗？

---

如何将图像上传到Angular中的Blob存储？

您提到的示例适用于可以访问文件系统的Node JS。要在浏览器中上载文件，需要使用

uploadBrowserDataToBlockBlob

方法

由此

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