裁剪图片并上传到阿里云的oss服务器上

在react项目整体利用umijs脚手架搭建，可以进umijs官网跟着步骤一步步来，然后在src目录下新建自己的js组件，样式文件这里没有，想要什么效果，自己可以新建一个空的样式文件进行编写，再测试一下代码即可。其实难点没有，都是别人写好的东东，要学的就是怎么套用，功能是怎么实现的，在实现功能的过程中可以尝试阅读组件的实现方式，学习他人的编码习惯，不断让自己养成编写规范代码的好习惯！！！

先说裁剪

1. 下载react-cropper

npm install --save react-cropper 

2. 需要导入的包

import React, {
   Component} from 'react';   
import {
   Upload, Icon, Button, Modal} from 'antd';            //利用Ant+Design中的Upload
import Cropper from 'react-cropper';                         //在导入之前，确保已经安装了react-cropper
import 'cropperjs/dist/cropper.css';                         //cropper样式文件
import './infoManage.scss'                                   //当前组件的样式文件
import userImg from '../../../assets/images/userCenter/head-img.png'             //我的页面中需要用到的图片资源

3. render部分

  render() {
   
        const imageUrl = this.state.imageUrl;         //涉及到的state中的初始化变量在第4点中有定义
        return (
            <div className="user-img">
                <div className="img-content-top">
                    <div className="img-content-left">
                        <div className="choose-img">
                            {
   /*<input type="file" className="myFileUpload" onChange={this.handleFileChange}/>*/}
                            {
   
                                this.state.userImg?
                                    <img className="oldUserImg" src={
   userImg} alt="用户头像"/>
                                    :
                                    //关于Cropper组件的使用我没有很熟练，只是需要什么效果就添加相应的参数进行配置  [参数解释](https://blog.csdn.net/qq_38048243/article/details/82013533)
                                    <Cropper
                                        src={
   this.state.srcCropper} //图片路径，即是base64的值，在Upload上传的时候获取到的
                                        ref="cropper"
                                        style={
   {
   height: 400}}       //react中样式需要写在双大括号中
                                        preview='.cropper-preview'    //指定类名为.cropper-preview的div作为预览的窗口
                                        className="company-logo-cropper"
                                        viewMode={
   1}        //定义cropper的视图模式,1代表限制裁剪框不超过画布大小
                                        zoomable={
   false} //是否允许放大图像，默认为true
                                        aspectRatio={
   50 / 50} //image的纵横比,即裁剪框的固定宽高比，默认情况下是自由比率
                                        guides={
   true} //显示在裁剪框上方的虚线   默认为true
                                        background={
   false} //显示容器的网格背景，即是否显示背景的马赛克，默认为true
                                        rotatable={
   false} //是否允许旋转图像   默认为true
                                        crop={
   this._crop.bind(this)}
                                        key="1"
                                    >
                                    </Cropper>
                            }



                        </div>
                        {
   /*<p className="img-request">只支持JPG、PNG、GIF，大小不超过5M</p>*/}
                    </div>
                    <div className="img-content-right">
                        <span className="pre-show">预览</span>
                        <div className="img-big">

                            {
   imageUrl ? <img src={
   imageUrl} alt="大图" className="upload-big"/> : <i/>}
                            <span>100*100px</span>
                        </div>
                        <div className=