如何在Azure IoT Central设备文件列表中查看层级文件夹结构？

可以通过自定义页面功能实现层级文件夹与文件的展示，以下是具体方案：

核心思路 #

Azure IoT Central默认的设备文件页面仅扁平化展示文件，但可以借助自定义HTML组件结合Blob Storage的API，读取并渲染Blob中已有的YYYY/YYYY-MM/YYYY-MM-DD层级结构，实现文件夹树的展示。

实现方案 #

1. 准备工作 #

• 确认IoT Central应用已开启自定义页面功能（可在应用设置的"自定义"标签中检查）
• 获取Blob Storage的合法访问权限：推荐使用短期SAS令牌（仅授予Blob容器只读权限）或Azure AD服务主体认证，避免硬编码敏感信息

2. 两种具体实现方式 #

方案一：改造现有设备文件页面

• 进入目标设备模板的编辑界面，切换到自定义标签
• 添加HTML内容组件，编写前端代码：
  • 调用Blob Storage API遍历当前设备关联的Blob路径（通常设备上传的文件会带有设备ID前缀）
  • 将Blob路径拆分成语义化的层级文件夹，渲染为可展开/折叠的树形结构
  • 点击文件夹时加载对应层级的文件列表，保持与原有文件页面的交互逻辑一致

方案二：创建独立的自定义文件浏览器页面

• 在IoT Central左侧导航栏选择自定义页面 -> 新建，命名为"设备文件层级浏览器"
• 添加HTML组件，编写代码实现：
  • 支持按设备筛选对应的文件层级结构
  • 渲染完整的YYYY/YYYY-MM/YYYY-MM-DD文件夹树，点击节点加载文件列表

3. 简化代码示例 #

以下是使用Azure Storage JavaScript SDK构建层级结构的核心代码：

// 初始化Blob服务客户端（使用SAS令牌或AD认证）
const blobServiceClient = new Azure.Storage.Blobs.BlobServiceClient(yourSasToken);
const containerClient = blobServiceClient.getContainerClient(yourContainerName);

// 构建文件夹层级并渲染
async function buildFolderTree(targetDeviceId) {
  const folderStructure = {};
  // 遍历指定设备的Blob
  for await (const blob of containerClient.listBlobsFlat({ prefix: `${targetDeviceId}/` })) {
    const pathSegments = blob.name.split('/').slice(1); // 剔除设备ID前缀
    let currentNode = folderStructure;
    
    // 构建文件夹节点
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const segment = pathSegments[i];
      if (!currentNode[segment]) {
        currentNode[segment] = { type: 'folder', children: {} };
      }
      currentNode = currentNode[segment].children;
    }
    
    // 添加文件节点
    const fileName = pathSegments[pathSegments.length - 1];
    currentNode[fileName] = { type: 'file', url: blob.url };
  }
  
  // 将结构渲染到页面的#folder-tree元素中
  renderTree(folderStructure, document.getElementById('folder-tree'));
}

// 简单的树形渲染函数
function renderTree(structure, parentElement) {
  Object.keys(structure).forEach(key => {
    const node = structure[key];
    const element = document.createElement('div');
    if (node.type === 'folder') {
      element.innerHTML = `<span class="folder">📁 ${key}</span>`;
      element.addEventListener('click', () => {
        const childrenContainer = element.querySelector('.children');
        childrenContainer.style.display = childrenContainer.style.display === 'none' ? 'block' : 'none';
      });
      const childrenContainer = document.createElement('div');
      childrenContainer.className = 'children';
      childrenContainer.style.display = 'none';
      renderTree(node.children, childrenContainer);
      element.appendChild(childrenContainer);
    } else {
      element.innerHTML = `<a href="${node.url}" target="_blank">📄 ${key}</a>`;
    }
    parentElement.appendChild(element);
  });
}

4. 注意事项 #

• 安全：禁止在前端代码中硬编码Blob Storage账户密钥，使用短期SAS令牌或Azure AD认证方式
• 性能：Blob数量较多时，实现懒加载（点击文件夹再加载对应内容）或分页机制，避免页面卡顿
• UI适配：调整CSS样式匹配IoT Central的默认界面风格，保证体验一致性

参考文档核心内容（翻译自微软官方文档）：
设备向Azure IoT Hub上传文件时，需先向IoT Hub请求上传用的SAS URI，随后直接将文件上传至指定的Blob Storage容器。上传完成后，设备需通知IoT Hub，IoT Hub会记录该文件的上传元数据（包含完整Blob路径）。

内容的提问来源于stack exchange，提问作者Duncan Groenewald