云存储管理模板

此模板实现了简易的云存储管理功能，包括上传文件、筛选文件、删除文件、查看文件详情等功能。

模板概览

模板具有以下实体：

• 变量 3 个：
  • filterPath：当前的筛选条件
  • selectedFile：当前选中文件
  • toUploadFiles：将要上传的文件数组

读取文件列表的实现

前端使用「数据表格」组件，进行了简易的样式配置。

表格的数据源由自定义代码实现，使用了内置的 @cloudbase/manager-node ，代码如下：

"use strict";

const CloudBase = require("@cloudbase/manager-node");

module.exports = async (event, context) => {
  let { pageNo, pageSize, filterPath = "/" } = event;

  const app = CloudBase.init({
    envId: context.vars.TARGET_ENV, // 环境ID，
  });

  // 获取各功能模块
  const { storage } = app;

  // 列出当前环境云存储内的所有文件
  const res = await storage.listDirectoryFiles(filterPath);

  // 按页切分
  const records = res.slice((pageNo - 1) * pageSize, pageNo * pageSize);

  // 如果为空，直接返回
  if (records.length === 0) {
    return {
      records: [],
      total: 0,
    };
  }

  // 获取每个文件的临时链接
  const urls = await storage.getTemporaryUrl(records.map((item) => item.Key));
  records.forEach((item, index) => {
    item.Url = urls[index].url;
  });

  return {
    records: records,
    total: res.length,
  };
};

数据筛选的实现

1. 用户在文本框中输入筛选条件后，点击“筛选”按钮，筛选按钮将页面内的 filterPath 变量设置为文本框“input1”的输入值（$w.input1.value）。
2. 数据表格组件绑定了查询方法，把数据源入参 filterPath 设为了页面内变量 filterPath（$w.page.dataset.state.filterPath），因为变量发生变化，自动触发表格的查询。
3. 表格组件调用数据源“查询文件列表”方法，将最终的数据展示到页面上。

文件详情的实现

1. 用户点击表格中的“查看”按钮，将当前行记录的 Key 值，赋值到页面内变量 selectedFileKey 中
2. 页面右侧的数据详情组件，绑定了“查询文件信息”的方法，将数据源入参 key 设置为页面内变量 selectedFileKey（$w.page.dataset.state.selectedFileKey）。因为变量发生变化，自动触发数据详情组件的查询。