antd 上传组件

链接 

zoomSlider 缩放滑块

rotationSlider：旋转滑块

aspectSlider：纵横比滑块

showGrid:显示网格 

import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState } from 'react';
export default function ImgageCrop() {
    const [fileList, setFileList] = useState([
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: '',
        },
      ]);
    
      const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
        setFileList(newFileList);
      };
    
      const onPreview = async (file: UploadFile) => {
        let src = file.url as string;
        if (!src) {
          src = await new Promise(resolve => {
            const reader = new FileReader();
            reader.readAsDataURL(file.originFileObj as RcFile);
            reader.onload = () => resolve(reader.result as string);
          });
        }
        const image = new Image();
        image.src = src;
        const imgWindow ='750px';
        imgWindow?.document.write(image.outerHTML);
      };
    
  return (
    

      {/* zoomSlider 缩放滑块 rotationSlider：旋转滑块  aspectSlider：纵横比滑块 showGrid:显示网格*/}
         
            
        {fileList.length == 1 && '+ Upload'}
      
    
    
  )
}