1. 背景
antd-img-crop 是一个用于包装 Ant Design Upload 的组件，可实现在上传前，先对图片进行裁切，然后上传裁切后图片。
2. 安装
1.先确保你有安装对应的包管理工具（yarn、npm、pnpm等）任意一种即可
// 查看是否已安装（任意一种即可）
1. yarn -v
# or
2. npm -v
2.开始安装antd-img-crop包
npm i antd-img-crop
# or
yarn add antd-img-crop
3. 基础使用
- antd-img-crop更多配置参数信息，请访问 👉🏻 antd-img-crop
- Upload更多使用方案，请访问 👉🏻 Antd Upload上传
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
const Demo = () => (
<ImgCrop rotationSlider>
<Upload
action='/upload.do'
listType="picture-card"
>
Upload上传
</Upload>
</ImgCrop>
);
4. 进阶使用
- 在Ant Design的Form表单中使用antd-img-crop进行图片的裁剪，表单提交时，无法获取对应子节点的值
<Form.Item
name="upload"
label="图片上传"
>
<ImgCrop rotationSlider>
<Upload
action='/upload.do'
listType="picture-card"
...
>
Upload上传
</Upload>
</ImgCrop>
</Form.Item>
- 首先，我们来看下Ant Design官网的说明：
- 设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管
- Form.Item 从子节点的 value 属性值获取，例子：<Input />
- Form.Item 设置了 getValueProps 或 valuePropName 属性，比如设置了valuePropName={'checked'}，则会从子节点的 checked 属性中去获取，例子：<Switch />
- 如果子节点没有 value 属性，而且从其他属性也无法获取到需要发送给后端的值，怎么办？通过 onChange 方法，或 trigger 属性指定的名称方法。由于 Form.Item 会自动向子节点传入 props ：value 属性（或 valuePropName 指定的其他属性），onChange 方法（或 trigger 指定的其他名称）。所以可以在子节点调用 props.onChange(value) 方法来传递 value 值。onChange 传入的参数即该 Form.Item 会向后端发送的值。
import { Form, Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
interface IProps { };
const Index: React.FC<IProps> = (props) => {
// 创建函数式组件
const UploadModel = (props: any) => {
return (
<ImgCrop rotationSlider>
<Upload
name='upload'
action='/upload.do'
listType='picture'
onChange={() => {
// 通过透传的props属性，调用props?.onChange传递给formItem
props?.onChange({
url: 'https://xxxxxxxxxx',
uid: 'done',
name: '图片',
});
}}
>
<Button>Click to upload</Button>
</Upload>
</ImgCrop>
);
};
return (
<Form form={form} name="userForm">
<Form.Item name="upload" label="图片上传" rules={[{ required: true }]}>
// 应用组件
<UploadModel />
</Form.Item>
</Form>
)
};
export default Index;
