用react的时候，结合antd 的upload 实现裁剪头像的功能

import React from 'react';
import { message,Upload, Icon} from "antd";

import { getAliYunInfo} from 'reduxs/action/aliYun';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import  './index.less';
import ReactCrop from "react-image-crop";
import ImgCrop from 'antd-img-crop';


@connect((state)=>{
    return {
       
    }
}, (dispatch)=>{
    return bindActionCreators({
        getAliYunInfo
    },dispatch)
})

class AliYun extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            loading: false,
            aliyunInfo:{},
            imageUrl: this.props.imageUrl,
         
        }
    }

    
    
    componentWillReceiveProps(nextProps){
        if (this.props.imageUrl != nextProps.imageUrl) {
            this.setState({
                imageUrl : nextProps.imageUrl
            })
        }
    }
    componentDidMount(){
        this.initAliYunInfo();
    }
    initAliYunInfo = ()=>{
        this.props.getAliYunInfo().payLoad.then((data)=>{
            if (data.status == 200) {
                this.setState({
                    aliyunInfo:{
                        OSSAccessKeyId: data.data.accessid,
                        policy: data.data.policy,
                        Signature: data.data.signature,
                        key: "seller_upload/" + Date.parse(new Date()) ,
                        callback: data.data.callback,
                    }
                })
            }
        })
    }
    beforeUpload = (file)=> {
        console.log(file)
        const _this = this;
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;

    }
    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            this.props.getImageUrl(info.file.response.file_url);
            this.setState({
                imageUrl: info.file.response.file_url,
                loading: false,
            })
        }
 
    }
 
    render(){
        const that = this;
        const { imageUrl,aliyunInfo } = this.state;

        const props = {
            name:"file",
            listType:"picture-card",
            className:"avatar",
            showUploadList:false,
            data: aliyunInfo,
            action:"http://store-face.oss-cn-hangzhou.aliyuncs.com",
            beforeUpload: that.beforeUpload,
            onChange: that.handleChange,
        };
        const imgProps = {
            width:160,
            height:90,
            modalTitle: "裁剪图片",
        }
        const uploadButton = (
            

                
                
上传
            
        );
        return(
            

                
                    
                        {imageUrl ?  : uploadButton}
                    
                
            
        )
    }
}

export default AliYun