azure storage上传图片文件并获取其url以显示img标签

Posted 2023-03-28

【中文标题】azure storage上传图片文件并获取其url以显示img标签

【英文标题】：azure storage upload image file and get its url to display with img tag

【发布时间】：2021-07-06 15:47:47

【问题描述】：

我想使用 azure 文件存储来存储图像文件

我可以使用以下代码上传图片文件

...
const uploadBlobResponse = await blockBlobClient.uploadFile('./test.png');
console.log('Blob was uploaded successfully. requestId: ', uploadBlobResponse);

输出是

Blob was uploaded successfully. requestId:  
  etag: '"0x8D8FCCEC050FDB7"',
  lastModified: 2021-04-11T09:46:59.000Z,
  contentMD5: <Buffer a6 c1 b2 ef 44 0d 59 d2 33 43 ea c3 03 06 3f e3>,
  clientRequestId: 'c261dccb-1b2f-4802-9768-c98bb59cc8b4',
  requestId: '686eda5f-301e-00c0-49b7-2ead12000000',
  version: '2020-06-12',
  versionId: undefined,
  date: 2021-04-11T09:46:58.000Z,
  isServerEncrypted: true,
  encryptionKeySha256: undefined,
  encryptionScope: undefined,
  errorCode: undefined,
  'content-length': '0',
  server: 'Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0',
  'x-ms-content-crc64': 'F99Vk4U+TkE=',
  body: undefined

所以，我无法获取图片的公共 URL。

我该怎么做？

【参考方案1】：

BlockBlobClient 有一个 url 属性，它将为您提供 blob 的 URL。比如：

const uploadBlobResponse = await blockBlobClient.uploadFile('./test.png');
console.log('Blob was uploaded successfully. requestId: ', uploadBlobResponse);
console.log('Blob URL: ', blockBlobClient.url);

但是，即使 URL 是 blob 的公共 URL，如果 blob 位于具有 Private ACL 的 blob 容器中，它仍可能导致 404 (Not Found) 错误。您需要使用具有至少 Read 权限的 blob 的 Shared Access Signature URL 才能通过其 URL 查看 blob。