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);
};效果图：
