OutSystems如何实现多文件上传？支持动态添加移除上传控件

OutSystems如何实现多文件上传？支持动态添加移除上传控件，最近在用OutSystems做一个多文件上传功能，用户可以在界面上动态的添加和移除上传控件，每一组控件有一个文件类型和一个上传控件，当用户要上传一种文件时，先通过下拉框选择文件类型，然后再上传，当然基本的表单验证功能是具备的，如必须选择文件类型，上传的文件只能是指定后缀名的文件，不能太大等。

OutSystems如何实现多文件上传

要实现在界面上动态添加控件的功能的这个功能，需要借助List来实现，刚开始做这个功能时，就思考了一下OutSystems 通过List实现在界面上动态添加上传控件，但如何做表单验证呢？所有界面上可视控件都需要验证是否上传了文件，如何处理？由于有过一定前端的开发经验，这些功能如果用js来实现，是很容易搞定的，但用OutSystems来实现还是头一回，带着这些问题，开始了本文的工作。

我们先来看看这个功能的演示。

核心的实现思路

第一步：定义一个Structure用于封装上传控件组的数据，大概如下图所示：

第二步：上传界面里面定义一个本地变量，是List类型的，正是第一步定义的Structure的List类型数据。

第三步：初始化事件里面（OnInitialize）添加一个默认对象，界面上才会显示一组上传控件。

第四步：其它界面效果，如移除，添加，无非就是对List集合进行操作了。

注意一些技术细节，因为上传控件是可以动态添加和移除的，因此上传控件的Change事件进行验证时，如上视频中上传控件触发Upload1OnChange事件，本质上是对List数据进行操作，需要使用索引下标的方式来对每一项的数据进行赋值。

Local.AttachmentFiles[ListIndexOf.Position].IsUploaded

下面是完整的思路。

在 OutSystems 中，通过动态列表添加上传控件，并对其进行表单验证，可以采用以下方法：

1. 保存动态控件状态

通过一个 List 数据结构（如 List of Record 或 List of FileUpload）来存储每个上传控件的状态，包括文件是否上传。每次用户在界面上添加控件时，向列表中新增一条记录，记录相关信息：

• 文件名（FileName）
• 文件大小（FileSize）
• 是否已上传（IsUploaded）

2. 创建动态控件

在界面中，通过 List Records 显示动态上传控件，每个控件的绑定值与对应的列表记录相关联。

操作步骤：

1. 使用 List Records 绑定到一个变量（例如 UploadedFiles）。
2. 在 List Records 的每一行中放置一个上传控件（FileUpload）并绑定到列表项。
3. 在上传控件的 OnChange 事件中，更新 UploadedFiles 列表中的对应记录，设置 IsUploaded = True 和 FileName。

3. 表单验证逻辑

在用户提交表单时，遍历 UploadedFiles 列表，检查每一条记录的 IsUploaded 状态。如果某一项未上传文件，则提示用户。

操作步骤：

1. 在提交按钮的 OnClick 事件中调用一个 Server Action 或 Client Action。
2. 在 Action 中遍历 UploadedFiles 列表，检查 IsUploaded。
   • 如果 IsUploaded = False，将错误消息显示到页面上，并阻止表单提交。
   • 可将验证信息显示在每个动态控件旁边（例如：红色提示“请上传文件”）。

4. 示例代码逻辑

伪代码如下：

Client Action 验证

For Each File in UploadedFiles
    If File.IsUploaded = False Then
        Set LocalVariable ErrorMessage = "请上传所有文件"
        End For Each
        Exit
    End If
End For Each

界面动态错误显示

• 在 List Records 中的每一行，放置一个条件容器 If，绑定 If File.IsUploaded = False，显示“请上传文件”的提示。

5. 提高用户体验

为了避免用户遗漏上传文件，可以：

• 提前校验 OnChange 事件中文件是否为空，并动态提示用户。
• 设置所有上传控件的占位符（placeholder），引导用户完成操作。

如果具体实现中有技术细节或逻辑需要帮助，可以进一步讨论！ 😊