### 使用 `ProFormUploadButton` 实现图片裁剪后上传 为了实现带有裁剪功能的图片上传，可以利用 Ant Design 的高级表单组件 `ProFormUploadButton` 并结合第三方库如 `react-cropper` 来完成这一需求。下面是一个详细的解决方案。 #### 安装依赖项 首先安装所需的 npm 包： ```bash npm install antd @ant-design/pro-form react-cropper cropperjs ``` #### 创建裁剪器并集成到 Upload 中 通过创建一个自定义钩子来处理图像的选择和裁剪逻辑，之后将裁剪好的图像传递给 `ProFormUploadButton` 进行上传操作[^1]。 ```javascript import React, { useState } from 'react'; import Cropper from 'react-cropper'; import 'cropperjs/dist/cropper.css'; import { Modal, Button, message } from 'antd'; import { ProFormUploadButton } from '@ant-design/pro-form'; const ImageCropperModal = ({ visible, onCancel, onConfirm }) => { const [imageSrc, setImageSrc] = useState(''); const [croppedImageUrl, setCroppedImageUrl] = useState(''); function handleImageChange(e) { e.preventDefault(); let files; if (e.dataTransfer) { files = e.dataTransfer.files; } else if (e.target) { files = e.target.files; } const reader = new FileReader(); reader.onloadend = () => { setImageSrc(reader.result); }; reader.readAsDataURL(files[0]); } return ( <Modal title="裁剪图片" visible={visible} footer={null}> <div> <input type="file" accept=".jpg,.jpeg,.png" onChange={(event) => handleImageChange(event)} /> {imageSrc && ( <> <Cropper src={imageSrc} style={{ height: 400 }} aspectRatio={1 / 1} preview=".img-preview" /> <footer className="modal-footer"> <Button onClick={() => onCancel()}>取消</Button> <Button onClick={() => onConfirm(croppedImageUrl)}>确认</Button> </footer> </> )} </div> </Modal> ); }; export default function CustomUploader({ ...props }) { const [isCroppingVisible, setIsCroppingVisible] = useState(false); async function beforeUpload(file) { setIsCroppingVisible(true); // 显示裁剪窗口 return false; // 阻止默认上传行为 } function afterCrop(imageUrl) { console.log('已裁剪:', imageUrl); // 将裁剪后的图片作为新的文件对象重新设置给 ProFormUploadButton fetch(imageUrl) .then((res) => res.blob()) .then((blob) => Object.assign(blob, { lastModified: Date.now(), name: `${Date.now()}.png`, }) ) .then((newFileObject) => { props.onChange({ file: newFileObject, fileList: [{ uid: '-1', status: 'done', url: URL.createObjectURL(newFileObject), thumbUrl: URL.createObjectURL(newFileObject) }], }); }); setIsCroppingVisible(false); } return ( <> <ProFormUploadButton {...props} beforeUpload={beforeUpload} /> <ImageCropperModal visible={isCroppingVisible} onCancel={() => setIsCroppingVisible(false)} onConfirm={afterCrop} /> </> ); } ``` 此代码片段展示了如何使用 `ProFormUploadButton` 和 `react-cropper` 库构建具有裁剪功能的图片上传流程。当用户尝试上传图片时会先弹出裁剪界面，在用户满意所选区域并点击“确认”按钮后才会真正提交修改过的图片数据[^2]。