Vaadin 23 实现Ctrl+V粘贴剪贴板文件到Upload组件上传

核心逻辑不需要改动Upload组件的后端接收逻辑，只需要在前端监听paste事件拿到剪贴板文件后，直接调用Upload组件的内部入队方法即可自动走完原有上传流程，所有进度回调、成功失败事件都和手动选文件完全一致。

服务端代码实现 #

直接在初始化Upload组件时注入前端监听逻辑即可，不需要额外依赖第三方组件：

// 初始化上传组件，配置和普通Upload完全一致
Upload upload = new Upload();
// 替换成你实际的文件接收逻辑
upload.setReceiver((fileName, mimeType) -> {
    Path savePath = Paths.get("your-upload-storage-path", fileName);
    return Files.newOutputStream(savePath);
});
// 配置你需要的上传监听器，比如成功、失败、进度监听，和普通用法无区别
upload.addSucceededListener(event -> {
    Notification.show("文件上传成功：" + event.getFileName());
});

// 注入前端粘贴监听逻辑
upload.getElement().executeJs("""
const upload = this;
// 监听组件区域内的粘贴事件
upload.addEventListener('paste', e => {
    e.preventDefault();
    const clipItems = e.clipboardData?.items;
    if (!clipItems) return;

    const pasteFiles = [];
    // 从剪贴板提取文件类内容（截图、复制的文件都支持）
    for (const item of clipItems) {
        if (item.kind === 'file') {
            const file = item.getAsFile();
            if (file) pasteFiles.push(file);
        }
    }
    if (!pasteFiles.length) return;

    // 等待Upload组件初始化完成后，直接加入上传队列触发上传
    customElements.whenDefined('vaadin-upload').then(() => {
        upload._addFiles(pasteFiles);
    });
});
""");

// 可选：修改提示文案告知用户支持粘贴
upload.setDropLabel("拖拽文件到此处、点击选择文件，或直接粘贴截图上传");

适配注意点 #

• 如果需要支持全局粘贴（不需要点中Upload组件也能粘贴上传），可以把事件监听绑定到document上，记得加判断：当前焦点在文本输入框、文本域、富文本编辑器时不触发上传逻辑，避免干扰用户正常粘贴文本的操作
• 剪贴板截图默认文件名为image.png，如果需要自定义命名，可以在拿到File对象后，通过new File([file], '自定义文件名.png', {type: file.type})重新构造文件对象再传入队列
• Vaadin 23全版本都支持_addFiles这个内部方法，不需要担心兼容性问题，上传时的请求参数、头信息和手动选文件完全一致，后端不需要做任何适配
• 如果需要限制只允许粘贴图片，可以在遍历剪贴板项时加判断item.type.startsWith('image/')过滤非图片文件

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