云存储管理-点击安装模板

云存储管理模板用于管理云开发的云存储文件，支持筛选、上传、下载等操作。

功能特性

• 开箱即用：开箱即用，简单配置即可与已有业务对接。
• 网页 Web 端：以网页 Web 形式呈现，可交付给团队运营人员、第三方商家登录使用。
• 多账号登录：支持分配和管理账号，供多人团队使用。
• 低代码定制：内置低代码开发工具，可根据自身需求任意修改管理后台应用。
• 微信生态友好：内置小程序、微信支付、公众号、企业微信等多种 API 连接器，减轻接口对接的开发工作量。

快速上手

第 1 步：安装云模板

在云模板详情中点击

安装

按钮，等待安装完成第 2 步：进入应用详情页操作

生成应用后，进入应用详情页，在详情页可以进行应用编辑等业务操作

模板概览

模板具有以下实体：

变量 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,
  };
};

数据筛选的实现

用户在文本框中输入筛选条件后，点击“筛选”按钮，筛选按钮将页面内的
filterPath
变量设置为文本框“input1”的输入值（
$w.input1.value

1. ）。

数据表格组件绑定了查询方法，把数据源入参
filterPath
设为了页面内变量
filterPath
（
$page.dataset.state.filterPath

1. ），因为变量发生变化，自动触发表格的查询。
2. 表格组件调用数据源“查询文件列表”方法，将最终的数据展示到页面上。

文件详情的实现

用户点击表格中的“查看”按钮，将当前行记录的
Key
值，赋值到页面内变量
selectedFileKey

1. 中

页面右侧的数据详情组件，绑定了“查询文件信息”的方法，将数据源入参
key
设置为页面内变量
selectedFileKey

1. （$page.dataset.state.selectedFileKey）。因为变量发生变化，自动触发数据详情组件的查询。

云存储管理-点击安装模板

云存储管理模板用于管理云开发的云存储文件，支持筛选、上传、下载等操作。

功能特性

• 开箱即用：开箱即用，简单配置即可与已有业务对接。
• 网页 Web 端：以网页 Web 形式呈现，可交付给团队运营人员、第三方商家登录使用。
• 多账号登录：支持分配和管理账号，供多人团队使用。
• 低代码定制：内置低代码开发工具，可根据自身需求任意修改管理后台应用。
• 微信生态友好：内置小程序、微信支付、公众号、企业微信等多种 API 连接器，减轻接口对接的开发工作量。

快速上手

第 1 步：安装云模板

在云模板详情中点击

安装

按钮，等待安装完成第 2 步：进入应用详情页操作

生成应用后，进入应用详情页，在详情页可以进行应用编辑等业务操作

模板概览

模板具有以下实体：

变量 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,
  };
};

数据筛选的实现

用户在文本框中输入筛选条件后，点击“筛选”按钮，筛选按钮将页面内的
filterPath
变量设置为文本框“input1”的输入值（
$w.input1.value

1. ）。

数据表格组件绑定了查询方法，把数据源入参
filterPath
设为了页面内变量
filterPath
（
$page.dataset.state.filterPath

1. ），因为变量发生变化，自动触发表格的查询。
2. 表格组件调用数据源“查询文件列表”方法，将最终的数据展示到页面上。

文件详情的实现

用户点击表格中的“查看”按钮，将当前行记录的
Key
值，赋值到页面内变量
selectedFileKey

1. 中

页面右侧的数据详情组件，绑定了“查询文件信息”的方法，将数据源入参
key
设置为页面内变量
selectedFileKey

1. （$page.dataset.state.selectedFileKey）。因为变量发生变化，自动触发数据详情组件的查询。