Vaadin 14中如何清除Uploader组件留存的已上传文件

之前操作无效的原因 #

你写的multiFileMemoryBuffer.getFiles().clear()只会清空服务端MultiFileMemoryBuffer里存的已上传文件引用，完全不会同步通知前端组件更新状态，前端还是会正常显示已经上传过的文件列表，自然看不到任何效果。

正确操作步骤 #

Vaadin 14 作为LTS版本，当时Upload组件还没封装清除文件列表的Java端公开API，必须同时清理服务端数据、重置前端状态，两步缺一不可：

• 第一步：清理服务端缓冲区的文件记录，你之前写的代码本身是对的：

// 清空服务端内存中留存的已上传文件引用
multiFileMemoryBuffer.getFiles().clear();

• 第二步：调用前端JS方法清空组件渲染的文件列表，这是你之前漏掉的核心操作：

// 把upload替换成你在Vaadin Designer里绑定的Upload组件实例变量名
upload.getElement().executeJs("this.files = []");

执行完这两步，组件前端显示的已上传记录会立刻清空，服务端也不会留存旧文件的引用，组件状态完全重置，可以正常接收新的上传文件。

避坑提示 #

• 别用「删掉组件再重新加一个」的笨方法实现清除，这么做会把之前绑定的上传成功、上传失败等事件监听器一起清掉，还会触发不必要的DOM重绘，很容易出莫名其妙的bug。
• 如果你用的是单文件上传场景的MemoryBuffer，操作逻辑完全一样，清空缓冲区后执行同一段JS代码就能完成重置。

内容的提问来源于stack exchange，提问作者Jonathan Sylvester