Vaadin 14 Upload组件X按钮监听器添加及文件同步问题求助

使用Upload组件时遇到以下问题：

• 删除已上传文件后，后台对应的文件对象并未移除。例如上传2个文件，删除1个后再上传新文件，后台会存在3个文件对象。
• 该Upload组件未提供文件删除/变更的对应监听器，无法直接感知文件列表的变化。

需要一种能准确获取用户实际上传文件的方法，确保最终提交的文件列表与用户操作后的结果一致。

核心思路是不依赖组件自带的文件管理逻辑，自行维护一份与用户操作同步的文件列表，提交时仅传递这份列表中的文件，具体实现步骤如下：

1. 初始化文件列表状态
   页面初始化时，定义一个数组（如actualFiles）存储用户最终要上传的文件，初始值为空数组。

2. 处理文件添加逻辑
   当用户选择文件后，将新增文件追加到actualFiles中。若组件提供文件添加回调（如onChange），就在回调内处理；若没有，则绑定文件选择控件的change事件获取文件：

// 示例：文件选择后的处理函数
function handleFileSelect(event) {
  const newFiles = Array.from(event.target.files);
  // 将新文件追加到实际待上传列表
  actualFiles.push(...newFiles);
  // 同步更新组件的文件显示（按需执行）
  updateUploadDisplay(actualFiles);
}

3. 处理文件删除逻辑
   给删除按钮绑定点击事件，点击时根据文件的唯一标识（如lastModified或自定义ID，避免重名文件混淆）从actualFiles中移除对应文件：

// 示例：删除指定文件的函数
function handleFileRemove(targetFile) {
  actualFiles = actualFiles.filter(file => file.lastModified !== targetFile.lastModified);
  // 同步更新组件的文件显示（按需执行）
  updateUploadDisplay(actualFiles);
}

4. 提交时传递维护的文件列表
   用户触发提交操作时，将actualFiles作为上传参数传给后台接口，而非使用组件自带的文件集合：

// 示例：文件提交函数
async function submitFiles() {
  const formData = new FormData();
  actualFiles.forEach(file => {
    formData.append('files', file);
  });
  
  // 发送上传请求
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
  
  const result = await response.json();
  console.log('上传完成:', result);
}

5. 同步组件显示（可选）
   若需要让组件的文件展示与实际待上传列表一致，每次修改actualFiles后，更新组件的显示内容，确保用户看到的列表与实际提交的文件完全匹配。

内容的提问来源于stack exchange，提问作者kimler jin