React文件选择后window.open在Chrome等浏览器被拦截的修复求助

问题原因 #

新版Chrome、Edge、Opera等基于Chromium的浏览器对弹窗触发逻辑有严格限制：只有**用户直接交互（比如点击按钮的瞬间）**触发的window.open才会被允许。文件选择器的onChange回调虽然由用户操作引发，但浏览器会判定它和初始点击操作的上下文已断开，因此会拦截弹窗；Firefox的判定规则相对宽松，所以能正常执行。

修复方案 #

方案1：提前创建空白弹窗（推荐）

在用户点击上传按钮的瞬间先打开一个空白窗口（此时属于直接交互，不会被拦截），然后在文件选择完成的回调里更新这个窗口的URL。

修改后的代码：

import { useState } from 'react';
import Button from '@mui/material/Button';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import styled from '@emotion/styled';

let previewWindow = null;

const VisuallyHiddenInput = styled("input")({
  clip: "rect(0 0 0 0)",
  clipPath: "inset(50%)",
  height: 1,
  overflow: "hidden",
  position: "absolute",
  bottom: 0,
  left: 0,
  whiteSpace: "nowrap",
  width: 1,
});

export default function UploadButton() {
  const handleFileUpload = (e) => {
    if (!e.target.files || !previewWindow) {
      if (!previewWindow) {
        alert('弹窗被浏览器拦截，请允许弹窗后重试');
      }
      return;
    }
    const file = e.target.files[0];
    const filename = file.name;

    // 更新弹窗的目标URL
    previewWindow.location = `${import.meta.env.VITE_DAEJAVIEWER}?image="${filename}"`;
    previewWindow = null;
  };

  return (
    <Button
      component="label"
      role={undefined}
      variant="contained"
      tabIndex={-1}
      startIcon={<CloudUploadIcon />}
      onClick={() => {
        // 用户点击时直接打开空白窗口
        previewWindow = window.open('', '_blank');
        // 若用户未选择文件，10秒后自动关闭空白窗口
        setTimeout(() => {
          if (previewWindow) {
            previewWindow.close();
            previewWindow = null;
          }
        }, 10000);
      }}
    >
      Upload file
      <VisuallyHiddenInput type="file" onChange={handleFileUpload} />
    </Button>
  );
}

方案2：添加手动触发按钮

如果提前打开空白窗口的方式不符合需求，可以在文件上传完成后显示一个"查看预览"按钮，让用户手动点击触发弹窗（完全符合浏览器的直接交互要求，不会被拦截）。

示例代码：

import { useState } from 'react';
import Button from '@mui/material/Button';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import styled from '@emotion/styled';

const VisuallyHiddenInput = styled("input")({
  clip: "rect(0 0 0 0)",
  clipPath: "inset(50%)",
  height: 1,
  overflow: "hidden",
  position: "absolute",
  bottom: 0,
  left: 0,
  whiteSpace: "nowrap",
  width: 1,
});

export default function UploadButton() {
  const [selectedFilename, setSelectedFilename] = useState(null);

  return (
    <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}>
      <Button
        component="label"
        role={undefined}
        variant="contained"
        tabIndex={-1}
        startIcon={<CloudUploadIcon />}
      >
        Upload file
        <VisuallyHiddenInput 
          type="file" 
          onChange={(e) => {
            if (e.target.files?.[0]) {
              setSelectedFilename(e.target.files[0].name);
            }
          }} 
        />
      </Button>
      
      {selectedFilename && (
        <Button
          variant="outlined"
          onClick={() => {
            window.open(
              `${import.meta.env.VITE_DAEJAVIEWER}?image="${selectedFilename}"`,
              '_blank'
            );
          }}
        >
          查看预览
        </Button>
      )}
    </div>
  );
}

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