1. 背景

antd-img-crop 是一個(gè)用于包裝 Ant Design Upload 的組件，可實(shí)現(xiàn)在上傳前，先對(duì)圖片進(jìn)行裁切，然后上傳裁切后圖片。

2. 安裝

1.先確保你有安裝對(duì)應(yīng)的包管理工具（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. 基礎(chǔ)使用

1. antd-img-crop更多配置參數(shù)信息，請(qǐng)?jiān)L問 ???? antd-img-crop
2. Upload更多使用方案，請(qǐng)?jiān)L問 ???? 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. 進(jìn)階使用

1. 在Ant Design的Form表單中使用antd-img-crop進(jìn)行圖片的裁剪，表單提交時(shí)，無法獲取對(duì)應(yīng)子節(jié)點(diǎn)的值

<Form.Item
  name="upload"
  label="圖片上傳"
>
    <ImgCrop rotationSlider>
      <Upload
        action='/upload.do'
        listType="picture-card"
        ...
      >
        Upload上傳
      </Upload>
  </ImgCrop>
</Form.Item>

2. 首先，我們來看下Ant Design官網(wǎng)的說明：

• 設(shè)置了 name 屬性的 Form.Item 包裝的控件，表單控件會(huì)自動(dòng)添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數(shù)據(jù)同步將被 Form 接管
• Form.Item 從子節(jié)點(diǎn)的 value 屬性值獲取，例子：<Input />
• Form.Item 設(shè)置了 getValueProps 或 valuePropName 屬性，比如設(shè)置了valuePropName={'checked'}，則會(huì)從子節(jié)點(diǎn)的 checked 屬性中去獲取，例子：<Switch />
• 如果子節(jié)點(diǎn)沒有 value 屬性，而且從其他屬性也無法獲取到需要發(fā)送給后端的值，怎么辦？通過 onChange 方法，或 trigger 屬性指定的名稱方法。由于 Form.Item 會(huì)自動(dòng)向子節(jié)點(diǎn)傳入 props ：value 屬性（或 valuePropName 指定的其他屬性），onChange 方法（或 trigger 指定的其他名稱）。所以可以在子節(jié)點(diǎn)調(diào)用 props.onChange(value) 方法來傳遞 value 值。onChange 傳入的參數(shù)即該 Form.Item 會(huì)向后端發(fā)送的值。

import { Form, Upload } from 'antd';
import ImgCrop from 'antd-img-crop';

interface IProps { };

const Index: React.FC<IProps> = (props) => { 
// 創(chuàng)建函數(shù)式組件
const UploadModel = (props: any) => {
    return (
      <ImgCrop rotationSlider>
        <Upload
          name='upload'
          action='/upload.do'
          listType='picture'
          onChange={() => {
            // 通過透?jìng)鞯膒rops屬性，調(diào)用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 }]}>
          // 應(yīng)用組件

          <UploadModel />
      </Form.Item> 
    </Form>
  )
};

export default Index;