react项目实现图片截图并上传oss

 使用 Create-React-App 脚手架创建antd开发,并引入react-cropper.js,将生成的截图上传至oss

npm install --save react-cropper

在项目中引入

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

上面代码中CropperDiv是可以自己命名的,我用cropperDiv是为了便于查找. 

import React, { Component } from 'react';
// redux
import { connect } from 'react-redux';
import CropperDiv from 'react-cropper';
import "./index.less";
import '../../../node_modules/cropperjs/dist/cropper.css';

class Job extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cropImg: '',//剪裁框里的图片路径
      newImg:'',//剪裁生成的图片
    }
  }
  render() {
    let { cropImg } = this.state,
    return (
      <div>
        <div className='img_items'>
          <img src='' title="选择图片" />
          <input title='选择图片'
            type="file"
            accept=".jpeg,.jpg,.png"
            onChange={this.handleFileChange}
          />
        </div>
        <button onClick={()=>this.makeImg()}>确定剪裁</button>
        <button onClick={()=>this.nextSureImg()}>确定上传</button>
        <CropperDiv
          src={cropImg} //图片路径，即是base64的值，在input的onchange事件获取到