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

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  

为了开发文件列表功能，我从此处开始使用Azure Storage JavaScript客户端库，并将所有必需的代码（.html和.js文件）放入Azure静态网站$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或listBlobDirectoriesSegmentedWithPrefix。因此，以我为例，我认为以结构良好/树格式列出所有Blob和目录并不能直接工作。

我当前的方法是欺骗代码以继续使用，listBlobDirectoriesSegmentedWithPrefix直到内部不再列出目录，然后继续使用listBlobsSegmentedWithPrefix

到目前为止，我很满意我的代码可以在叶级别列出所有Blob，并且还可以列出所有目录（如果不在叶级别也可以列出所有目录）。您可以在此处查看blob列表，并可以随时通过“查看源代码”查看我到目前为止构建的代码。

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

??? 201801_Review.pdf  
??? 201802_Review.pdf  
??? 201803_Review.pdf  

这是一个预期的问题，因为listBlobsSegmentedWithPrefix如果不在叶级别上，我就不会运行。原因是它将产生类似这样的输出，这不是我想要的：

??? docx/201801_Discussion.docx  
??? docx/201802_Discussion.docx  
??? xlsx/201801_Summary.xlsx  
??? xlsx/201802_Summary.xlsx  
??? xlsx/201803_Summary.xlsx  
??? 201801_Review.pdf  
??? 201802_Review.pdf  
??? 201803_Review.pdf 

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

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

Answer 1

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

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

使用delimiter /，列表操作返回两部分的结果。

1. result，包含容器根目录下的blob信息，例如您所用的201801_Review.pdf等。

2. 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重构代码。请参阅列表Blob部分中Using a Delimiter to Traverse the Blob Namespace的更多信息。