react-cropper图片裁剪并上传

react-cropper图片裁剪并上传

官方Demo
github
1、安装

npm install --save react-cropper

2、效果图

3、大致代码

import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

const ScreenCropper = (props) => {
   
	const [image, setImage] = useState(defaultImg);
	const [cropper, setCropper] = useState('');
	const onChange = (e) => {
   
        e.preventDefault();
        let files;
        if (e.dataTransfer) {
   
            files = e.dataTransfer.files;
        } else if (e.target) {
   
            files = e.target.files;
        }
        const reader = new FileReader();
        reader.onload = () => {
   
            setImage(reader