Question

我目前正在开发一些代码集，以使用Web前端显示指定Azure容器内的所有Blob。我期望最终输出是这样的：

我首先创建了一个虚拟存储帐户，并在其中填充了一些虚拟文件供我使用。

https://alicebob.blob.core.windows.net/documents  
├── docx  
│   ├── 201801_Discussion.docx  
│   ├── 201802_Discussion.docx  
├── xlsx  
│   ├── 201801_Summary.xlsx  
│   ├── 201802_Summary.xlsx  
│   ├── 201803_Summary.xlsx  
├── 201801_Review.pdf  
├── 201802_Review.pdf  
├── 201803_Review.pdf

要开发文件列表功能，我正在使用here中的Azure Storage JavaScript客户端库，并将所有必要的代码（.html和.js文件）放在Azure静态网站{{ 1}}容器，然后在静态网站配置中将$web设置为index.html和Index document name。

Error document path

问题在于执行列表的功能仅是https://alicebob.z23.web.core.windows.net/ ├── azure-storage.blob.min.js ├── azure-storage.common.min.js ├── index.html或listBlobsSegmentedWithPrefix。因此，以我为例，我认为以结构良好的/树格式列出所有blob和目录不会直接起作用。

我目前的方法是，我欺骗代码以继续使用listBlobDirectoriesSegmentedWithPrefix直到内部没有其他目录可以列出，然后继续使用listBlobDirectoriesSegmentedWithPrefix

列出

到目前为止，我非常满意我的代码可以在叶级别列出所有Blob，并且还可以列出所有不在叶级别的目录。您可以看一下清单here上的内容，并随时选择“查看源代码” 来查看我到目前为止构建的代码。

我所面对的唯一问题是，如果不在叶级别上，则这组代码无法列出Blob。例如，它无法列出listBlobsSegmentedWithPrefix存储帐户上的这些blob：

alicebob

这是一个预期的问题，因为如果它不在叶级别上，则我没有运行├── 201801_Review.pdf ├── 201802_Review.pdf ├── 201803_Review.pdf。原因是它会产生这样的输出，这不是我想要的：

listBlobsSegmentedWithPrefix

关于如何克服此问题的任何建议？实际的实现将涉及大量数据，因此我认为在这种情况下，简单的if-then-else效率不高。

很抱歉，冗长的描述，但我只是想尽可能清楚地描述我的问题：）

Answer 1

列出blob时有一个称为定界符的选项。让我们开始编写代码。

blobService.listBlobsSegmentedWithPrefix('documents',null,null,{delimiter:'/'},(error,result,response)=>{
    console.log(result);
    console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
})

使用定界符/，列出操作返回两部分的结果。

result，包含容器根目录下的blob信息，例如201801_Review.pdf等）。
BlobPrefix包含带分隔符的单级目录名称。
```
[ { Name: 'docx/' }, { Name: 'xlsx/' } ]
```

使用BlobPrefix作为prefix，我们可以继续列出当前子目录的内容。

    blobService.listBlobsSegmentedWithPrefix('documents','docx/',null,{delimiter:'/'},(error,result,response)=>{
        console.log(result);
        console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
    })

基本上，第1点的结果就足够了，您不必使用BlobPrefix来重构代码。在list blobs的Using a Delimiter to Traverse the Blob Namespace部分中查看更多信息。

Answer 2

您还可以使用获取请求，而无需花费整个存储api的开销，如下所述。

  fetch("https://cvworkshop.blob.core.windows.net/telaviv-bw/?restype=container&comp=list")
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(data => console.log(data));

使用Web前端列出具有目录级别支持的Azure容器中的所有Blob

2 个答案: