react的antd组件中上传图片组件，点击预览却打开新页面，将其改为放大预览

1、引入
 

import type { GetProp } from 'antd';
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

2、添加状态

  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');

3、在upload中添加onPreview={handlePreview}事件

  const getBase64 = (file: FileType): Promise<string> =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = (error) => reject(error);
    });
//预览事件
  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as FileType);
    }
    setPreviewImage(file.url || (file.preview as string));
    setPreviewOpen(true);
  };

效果图：