antd-img-crop + Form + Upload 实现图片裁剪功能

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. 基础使用

1. antd-img-crop更多配置参数信息，请访问 👉🏻 antd-img-crop
2. 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. 进阶使用

1. 在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>

2. 首先，我们来看下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;