我来帮你拆解这个问题，结合Chrome的安全机制和Vaadin的组件特性分析：

为什么Chrome失效，其他浏览器（包括Firefox）却正常？ #

核心差异在于不同浏览器对文件输入框点击触发的安全限制逻辑不同：

• Chrome在最新版本中对<input type="file">的模拟点击有严格要求：必须是用户直接触发的同步交互事件链才能触发。如果你的JS代码执行时，已经脱离了MenuBar点击的同步上下文（比如Vaadin框架对事件的封装导致异步执行），Chrome会直接阻止这个操作。
• Firefox及其他浏览器的限制相对宽松：它们允许在用户交互的事件栈中，即使经过框架的多层回调处理，依然可以触发模拟点击。另外，你用到的旧版createEvent("MouseEvents")API，在Firefox中兼容性更好，而Chrome对这类过时API的限制更严格。

可行的解决方案 #

1. 使用现代事件构造API替代旧版createEvent #

把你的JS代码换成更现代的MouseEvent构造函数，同时确保代码在用户点击的同步上下文执行：

function clickUpload(element) {
  // 用现代API构造鼠标事件
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
    isTrusted: false // 明确标记为模拟事件，适配部分浏览器规则
  });
  element.dispatchEvent(clickEvent);
}

2. 通过Vaadin Java代码确保同步执行上下文 #

在Vaadin的Java层处理MenuBar点击事件时，直接在回调中执行JS，确保代码处于用户交互的同步栈中：

// 假设你已获取MenuBar的MenuItem和Upload组件实例
menuItem.addClickListener(e -> {
  // 直接在点击回调中执行JS，保证同步上下文
  UI.getCurrent().getPage().executeJs("""
    // 替换成你的Upload组件定位选择器，比如根据id或类名
    const uploadInput = document.querySelector('#your-upload-component input[type="file"]');
    if (uploadInput) {
      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window });
      uploadInput.dispatchEvent(clickEvent);
    }
  """);
});

3. 优先使用Vaadin原生API（推荐） #

如果你的Vaadin版本支持，尽量通过组件的原生方法触发上传，避免直接操作DOM：

// 以Vaadin 14+的Upload组件为例
Upload upload = new Upload();
// 调用组件原生方法触发文件选择窗口
upload.getElement().callJsFunction("click");

额外注意事项 #

• 检查CSP配置：虽然Firefox能正常运行，但Chrome的CSP可能对unsafe-inline或事件触发有更严格的要求，确保CSP允许在用户交互上下文内执行相关JS。
• 避免异步操作：如果你的JS代码是通过setTimeout或其他异步方式执行的，Chrome会直接阻止，必须保证在用户点击的同步回调链中完成触发。

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