reactjs - React Js 与 azure 存储 blob

Question

我在使用 React js 从 Azure 存储帐户下载文件时遇到问题。我通过 npm install 安装了 @azure/storage-blob 并导入了它。

const storageAccount = '<storage-account-name>';
const sas = '<sas-token>'
const blobService = new BlobServiceClient(
      `https://${storageAccount}.blob.core.windows.net/${sas}`
);

const containerClient = blobService.getContainerClient('<container-name>');
const blobClient = containerClient.getBlockBlobClient('<file-name>');
blobClient.download().then(val => console.log(val));

当我尝试使用 readStreamBody 下载 Microsoft 示例中提到的文件时 https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-download-javascript#download-to-a-string ，我可以访问该帐户，但总是将 readableStreamBody 检索为未定义。

我需要为 Azure 配置任何设置吗？

提前谢谢您。

我期待 readStreamBody 的值，这样我就可以下载该文件。

Answer 1

考虑到您正在使用 ReactJS 下载 blob(换句话说，在浏览器中使用 SDK)，blob 内容可在 blobBody 中找到。来自 documentation link您分享了:

请尝试以下操作:

// Download and convert a blob to a string
const downloadBlockBlobResponse = await blobClient.download();
const downloaded = await blobToString(await downloadBlockBlobResponse.blobBody);
console.log(
  "Downloaded blob content",
  downloaded
);

async function blobToString(blob: Blob): Promise<string> {
  const fileReader = new FileReader();
  return new Promise<string>((resolve, reject) => {
    fileReader.onloadend = (ev: any) => {
      resolve(ev.target!.result);
    };
    fileReader.onerror = reject;
    fileReader.readAsText(blob);
  });
}

代码引用:https://learn.microsoft.com/en-us/javascript/api/%40azure/storage-blob/blobclient?view=azure-node-latest#@azure-storage-blob-blobclient-download .