如何实现多文件的上传与管理？

项目访问链接

https://zion.functorz.com/tool/KrABb5Mb8vr/WEB?code=n48cQCjpmf70Q&ref=4857164 

场景与目标

• 目标：在应用中实现多文件的上传、展示及删除功能，并掌握实时同步与批量提交两种逻辑。
• 适用场景：附件管理、相册上传、个人资料完善等需要处理多个文件的场景。
• 核心逻辑：
  • 实时上传：上传组件触发后直接写入数据库并刷新 UI。
  • 统一上传：利用本地状态（页面变量列表）作为中转站，用户确认后再执行数据库的批量清理与写入。

步骤

数据存储

数据模型

1. 数据表：file 用于存储上传的文件记录。

方案一：文件的实时上传

此方案特点是“即选即传”，操作简单直接。

UI 搭建与交互

1. 创建页面变量： 创建一个名为 file 的页面变量，类型选择“文件”，用于接收上传组件的临时输出。

2. 列表组件：
   • 数据源：绑定至 file 数据表。
   • 数据绑定：列表内的文本组件绑定为 item.file.filename 以显示文件名。
   • 删除按钮-点击时：触发删除数据动作，条件为 id 等于当前项的 id。
     • 数据筛选：过滤条件：id 等于 当前项/id
     • 成功时：执行刷新动作，对象为列表。

逻辑与状态配置

配置上传按钮行为流：

• UI配置：选择一个按钮组件。
• 触发时机：上传按钮的行为-点击时。
• 动作步骤：
  1. 上传文件：将文件上传至云端，目标变量选择页面变量 file。
  2. 添加数据：选择 file 数据表，将页面变量 file 的值写入表中的 file 字段。
  3. 刷新页面：执行刷新动作，确保下方的列表组件能即时显示新上传的文件。

方案二：先选择文件，保存后统一上传

此方案引入了中间状态，允许用户在提交前预览和修改文件列表。

逻辑与状态配置

1. 创建页面变量：
   • file：类型为“文件”，作为单次上传的缓冲。
   • files：类型为“文件”，勾选是列表，用于存储待提交的文件集合。

2. 配置上传按钮行为流：
   • 动作步骤：
     1. 上传文件：目标变量设为 file。
     2. 修改本地状态：选择变量 files，操作类型选择添加，值为页面变量 file。

3. 配置保存按钮行为流：
   1. 删除数据：为了实现覆盖式更新，先删除 file 表中所有旧数据（条件设为 id 不为空）。
   2. 批量添加数据：选择 file 表，数据来源选择页面变量 files 列表，参数file设置为循环项-添加 file-当前项。

4. 初始化数据同步（关键）： 为了保证刷新页面后仍能看到已存数据，需配置远程数据。
   • 远程数据配置：创建查询 file 表的远程数据源。
   • 远程数据成功时：使用修改页面变量动作，将远程数据源中的文件列表赋值给页面变量 files。

UI 搭建与交互

• 列表组件：
  • 数据源：绑定至页面变量files。

• 数据绑定：文本组件绑定为 item.name。
• 删除按钮：
  • 点击时：触发设置页面变量，从 files 列表中移除当前项。

4. 验证

步骤 1：测试实时上传

• 操作：点击方案一的上传按钮，选择一个图片文件。
• 预期结果：上传完成后，列表立即出现该文件名。点击删除，记录消失。

步骤 2：测试统一上传

• 操作：在方案二中连续上传三个文件，此时不刷新页面。
• 预期结果：列表显示三个文件，但数据库后台此时应无新增记录。
• 操作：点击“保存”按钮，然后刷新浏览器页面。
• 预期结果：页面加载后，列表依然显示这三个文件，证明数据已成功批量写入并完成初始化同步。