antd5 上传图片支持裁剪处理和预览图片（antd-img-crop）

文档：https://github.com/nanxiaobei/antd-img-crop/blob/main/README.zh-CN.md

安装

pnpm add antd-img-crop
# or
yarn add antd-img-crop
# or
npm i antd-img-crop

使用

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

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);

Props

属性	类型	默认	说明
quality	number	0.4	裁切图片质量，0 到 1 之间
fillColor	string	'white'	裁切图像填充色
zoomSlider	boolean	true	图片缩放控制
rotationSlider	boolean	false	图片旋转控制
aspectSlider	boolean	false	裁切比率控制
showReset	boolean	false	显示重置按钮，重置缩放旋转及比率
resetText	string	重置	重置按钮文字
aspect	number	1 / 1	裁切区域宽高比，width / height
minZoom	number	1	最小缩放倍数
maxZoom	number	3	最大缩放倍数
cropShape	string	'rect'	裁切区域形状，'rect' 或 'round'
showGrid	boolean	false	显示裁切区域网格（九宫格）
cropperProps	object	-	[react-easy-crop] 的 props（* 已有 props 无法重写）
modalClassName	string	''	弹窗 className
modalTitle	string	'编辑图片'	弹窗标题
modalWidth	number | string		弹窗宽度
modalOk	string		确定按钮文字
modalCancel	string		取消按钮文字
onModalOK	function	-	点击确定按钮的回调
onModalCancel	function	-	点击取消按钮、遮罩层、或右上角 ‘x’ 的回调
modalProps	object		[Ant Design Modal] 的 props（* 已有 props 无法重写）
beforeCrop	function	-	裁切弹窗打开前的回调，若返回 false 或 reject，弹窗将不会打开

支持预览图片

利用Upload组件的openFileDialogOnClick属性

const ImageUpload: React.FC<ImageUploadProps> = (props) => {
  const { 
    imageUrl, 
    aspect,
    loading, 
    onRemove, 
    uploadAction,  
  } = props;

  const [visible, setVisible] = useState(false);

  return (
    <ImgCrop
      aspect={aspect}
      quality={1}
      rotationSlider
    >
      <Upload
     
        name="avatar"
        listType="picture-card"
        maxCount={1}
        showUploadList={false}
        customRequest={({ file }) => {
          uploadAction(file);
        }}
        openFileDialogOnClick={!imageUrl}//当图片资源链接不存在时打开文件上传对话框
      >
        {imageUrl ? (
          <>
            <Image
              src={imageUrl}
              preview={{
                visible: visible,
                mask: (
                  <div>
                    <Button
                      type="text"
                      style={{ backgroundColor: 'transparent' }}
                      icon={<EyeOutlined  />}
                      onClick={() => {
                        setVisible(true);
                      }}
                    >
                    </Button>
                    <Button
                      type="text"
                      style={{ backgroundColor: 'transparent' }}
                      icon={<DeleteOutlined  />}
                      onClick={() => {
                        onRemove && onRemove();
                      }}
                    >
                    </Button>
                  </div>
                ),
                onVisibleChange: (visible) => {
                  if (!visible) {
                    setVisible(visible);
                  }
                }
              }}
              height={'100%'}
              width={'100%'}
              fallback={CALLBACK_IMG}//CALLBACK_IMG加载失败图片
            />
          </>
        ) : (
          <div>
            {loading ? (  <LoadingOutlined />) : (
              <>
                <PlusOutlined />
                <div >Upload</div>
              </>
            )}
          </div>
        )}
      </Upload>
    </ImgCrop>
  );
};

export default ImageUpload;

import {uploadFile} from '@/service/upload'
const Form = () => {
const [loading, setLoading] = useState(false)
const [imageUrl, setImageUrl ] = useState('')

const uploadAction = (file) => {
setLoading(true)
    // 上传文件
  uploadFile(file).then((res: string) => {
    setImageUrl(res)
    setLoading(false)
  }).catch(() => {
    setLoading(false)
  })
}

  return (
    <ImageUpload
      aspect={1}
      loading={loading}
      imageUrl={imageUrl}
      uploadAction={uploadAction}
      onRemove={() => {
        setImageUrl('');
      }}
    />
  )
}

export default Form;