react-cropper + antdesign +dva 实现裁剪图片并上传的功能

react-cropper + antdesign +dva 实现裁剪图片并上传的功能

一.首先安装react-cropper插件
npm install --save react-cropper
执行该命令以后，下载react-cropper依赖信息自动更新到package.json中
在使用该插件的代码中需要进行引入

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

二.如下列出相应插件的文档以供参考

react-cropper文档：https://www.npmjs.com/package/react-cropperjs
官方cropper文档：https://fengyuanchen.github.io/cropper/
一个作者总结的相关插件的中文版文档：https://blog.csdn.net/weixin_38023551/article/details/78792400

三.主要的实现的功能

使用antdesign的upload组件进行上传图片，并调用react-cropper组件实现固定长和宽的截图，将截图的结果以FILE格式传给后台。实现效果如下。

可以上传多张图片。

四.主要的思路
首先构建一个CropperUpload组件，该组件接收截图框的长，宽，Upload样式模式，初始图片列表四个参数。该组件主要实现上传可截图的图片的功能，在Upload组件的beforeUpload中用FileReader读取要上传的文件的base64码，并返回false阻止Upload组件自动上传，将文件码赋值给cropper组件，用cropper进行截图，截图之后，将cropper返回的base64码转换成File格式传向后台。

五.具体函数的实现
1.首先需要一个ant的Upload组件，在这里主要用到这个组件的三个重要参数，beforeUpload上传图片之前触发的回调，onRemove删除图片的回调，fileList已上传图片的列表。

	<Upload
          name="files"
          listType={
     this.state.pattern === 1 ? " " : this.state.pattern === 2 ? "picture-card" : "picture"}
          className={
     this.state.pattern === 3 ? styles.uploadinline : ""}
          beforeUpload={
     this.beforeUpload.bind(this)}
          onRemove={
     this.handleRemove.bind(this)}
          fileList={
     this.state.fileList}
        >
          {
     botton}
     </Upload>

其他的listType主要是支持Upload不同的样式模式。如图所示的三种模式。

点击上传图片按钮会触发beforeUpload函数，如果想获取通过input选择的文件的数据，我们就需要使用到js封装好的FileReader对象。并通过input.files[0]来获取点击上传的文件对象，在这里因为用了Upload组件，该组件已经封装好了，此时会通过beforeUpload的file参数传递进来，文件对象里面包括文件大小（size），文件的名字（name）和文件类型（type），可以通过该文件类型来判断上传的文件是否是图片，判断的正则如下

/image\/\w+/.test(file.type)

通过调用FileReader来读取文件，文件读取结束之后会调用onload回调，在onload回调中，在通过image.onload回调（该回调是异步的）来获取图片的长宽，图片的长宽必须大于裁剪框的长宽，最后通过e.target.result来获取图片的base64码，将该码通过setSate设置给reactCropper的src中，src为裁剪插件的图片的源，在将包裹裁剪框的Modal框弹出，通过将Modal的visible设置为true，Model的visible在这里用state中的editImageModalVisible来控制，此时将弹出裁剪图片的裁剪框。

	// 特产介绍图片Upload上传之前函数
  beforeUpload(file, fileList) {
     
    //当打开同一张图片的时候清除上一次的缓存
    if (this.refs.cropper) {
     
      this.refs.cropper.reset();
      this.refs.cropper.setData({
     
        width: this.state.width,
        height: this.state.height,
      });
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      //添加文件限制
      MsgBox.error({
      content: '文件大小不能超过10M' });
      return false;
    }

    var reader = new FileReader();
    const image = new Image();
    var height;
    var width;
    //因为读取文件需要时间,所以要在回调函数中使用读取的结果
    reader.readAsDataURL(file); //开始读取文件

    reader.onload = (e) => {
     
      image.src = reader.result;
      image.onload = () => {
     
        height = image.naturalHeight;
        width = image.naturalWidth;
        if (height < this.state.height || width < this.state.width) {
     
          message.error('图片尺寸不对 宽应大于:'+this.state.width+ '高应大于:' +this.state.height );
          this.setState({
     
            editImageModalVisible: false, //打开控制裁剪弹窗的变量，为true即弹窗
          })
        }
        else{
     
          this.setState({
     
            srcCropper: e.target.result, //cropper的图片路径
            selectImgName: file.name, //文件名称
            selectImgSize: (file.size / 1024 / 1024), //文件大小
            selectImgSuffix: file.type.split("/")[1], //文件类型
            editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
          })
          if (this.refs.cropper) {
     
            this.refs.cropper.replace(e.target.result);
          }
        }
      }
    }
    return false;
  }

裁剪框的设置如下，src是裁剪框图片的路径，ref为该组件真实实例的引用，viewMode在这里选择了模式1，zoomable是否允许放大图像，movable是否允许移动图像，在这里设置了ready函数，当一个cropper实例完全构建时，这个事件就会发生，用于在每一次裁剪之前都重新设置一下裁剪框大小，否则他会自动的恢复默认原图像0.8比例。

 		<Cropper
            src={
     this.state.srcCropper} //图片路径，即是base64的值，在Upload上传的时候获取到的
            ref="cropper"
            viewMode={
     1} //定义cropper的视图模式
            zoomable={
     true} //是否允许放大图像
            movable={
     true}
            guides={
     true} //显示在裁剪框上方的虚线
            background={
     false} //是否显示背景的马赛克
            rotatable={
     false} //是否旋转
            style={
     {
      height: '100%', width: '100%' }}
            cropBoxResizable={
     false}//是否可以拖拽
            cropBoxMovable={
     true}//是否可以移动裁剪框
            dragMode="move"
            center={
     true}
            ready={
     this._ready.bind(this)}
          />

裁剪框父组件设置如下，可见与不可见通过页面的stated的editImageModalVisible来控制，当上传图片时此状态设置为true显示裁剪框，当上传图片成功，或者关闭裁剪框的时候将此状态设置为false关闭裁剪框，Modal组件的高度是自适应组件内的图片高度的，宽度并不自适应图片的宽度，若不设置将会有默认的宽度，因此在这里设置为100%，当裁剪完成点击保存触发saveImg函数回调，当点击取消的时候触发handleCancle回调。

       <Modal
          key="cropper_img_icon_key"
          visible={
     this.state.editImageModalVisible}
          width="600"
          footer={
     [
            <Button type="primary" onClick={
     this.saveImg.bind(this)} >保存</Button>,
            <Button onClick={
     this.handleCancel.bind(this)} >取消</Button>
          ]}>
        </Modal>

点击保存按钮之后，触发saveImg函数，要使用FormData向后台传数据，并且传输的是格式是FILE格式的，因此现将截图的结果取出，取出的时候使用this.refs.cropper.getCroppedCanvas().toDataURL()，最终取出的是截图后图片的base64码，通过dataURLtoFile函数将base64转换成FILE，封装到formdata中，调用后台的一个接口postimage。后台将返回一个图片的路径给前台。前台将路径取出，并按照Upload组件图片列表默认显示的格式来构建，最终push到fileList中，显示在Upload组件上。并将state中editImageModalVisible的状态置为false，关闭Modal裁剪框。

saveImg() {
     
    const {
      dispatch } = this.props;
    var formdata = new FormData();
    formdata.append("files", this.dataURLtoFile(this.refs.cropper.getCroppedCanvas().toDataURL(), this.state.selectImgName));
    dispatch({
     
      type: 'getData/postimage',
      payload: formdata,
      callback: () => {
     
        const {
      success, msg, obj } = this.props.imagePictures;
        if (success) {
     
          let imageArry = this.state.pattern == 3 ? this.state.fileList.slice() : [];
          imageArry.push({
     
            uid: Math.random() * 100000,
            name: this.state.selectImgName,
            status: 'done',
            url: obj[0].sourcePath,
            // url:obj[0].sourcePath,
            thumbUrl: this.refs.cropper.getCroppedCanvas().toDataURL(),
            thumbnailPath: obj[0].thumbnailPath,
            largePath: obj[0].largePath,
            mediumPath: obj[0].mediumPath,
            upload: true,
          })
          this.setState({
     
            fileList: imageArry,
            editImageModalVisible: false, //打开控制裁剪弹窗的变量，为true即弹窗
            srcCropper: this.state.srcCropper, //cropper的图片路径
          })
          this.props.onChange(imageArry);
        }
        else {
     
          message.error(msg);
        }
      },
    });
  }

在modal中调用getData的postimage向后台发送数据，现在附上请求头的设置部分，因为传递的数据已经用formdata封装上了，因此直接就传递给后台就可以。

export default function request(url, options) {
     
  const defaultOptions = {
     
    credentials: 'include',
  };
  const newOptions = {
      ...defaultOptions, ...options };
  if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
     
      newOptions.method = 'POST'
  }
  return fetch(url, newOptions)
    .then(checkStatus)
    .then((response) => {
     
      if (newOptions.method === 'DELETE' || response.status === 204) {
     
        return response.text();
      }
      return response.json();
    })
    .catch((e) => {
     
      const {
      dispatch } = store;
      const status = e.name;
      if (status === 401) {
     
        dispatch(routerRedux.push('/user/login'));
        return;
      }
    });
}

向后台发送图片的请求头：

后传传输回数据：图片存储的路径，分为不同种的格式，大图，小图，中图，原图。

六遇到的问题
上面流程看似简单，可是在实际开发中遇到了无数的困难！下面给大家分享我的经历。
1.beforeUpload组件问题
当Upload组件调用beforeUpload函数的时候，如果函数的返回值是false的时候，就会清空fileList，所以每次参数fileList之中都只有当前的图片，没有之前上传过的，这是因为当beforeUpload函数返回时false的时候，会自动触发onChange函数，触发时fileList中只有当前的上传的图片，因此若再用onChange函数中调用setState来维护fileList就会将之前的图片都清除。因此在这种完全阻止自动上传的情景下就应该将onChange函回调函数删除。

 <Upload
          name="files"
          action="/hyapi/resource/image/multisize/upload"
          beforeUpload={
     this.beforeUpload.bind(this)}
          onRemove={
     this.handleRemove.bind(this)}
          fileList={
     this.state.fileList}
          //onChange={this.onChange}//这里将不使用onChange回调
        >
          {
     botton}
        </Upload>

2.对同一张图片进行截图的问题
当对一张图片进行截图，调整了图片的位置和缩放，下次再打开同一张图片，还会保留有上一次的记录。
第一次打开的位置：

改变图片大小和位置：

再次打开时候还是上图所示位置，cropper对同一张图片没有重新的渲染。cropper组件有一个ready函数，每一次截图准备完毕之前都会调用，在ready里面打印，发现同一张图片连续上传，只有第一次会调用ready。

  _ready() {
     
    this.refs.cropper.setData({
     
      width: this.state.width,
      height: this.state.height,
    });
  }

这说明对同一张图片，cropper不会重新渲染，所以就要手动在每次弹出截图框的时候进行reset一下，因此在beforeUpload函数中进行恢复初始化操作。调用this.refs.cropper.reset()，并重新设置裁剪框的宽和高，否则会恢复默认原图的0.8比例。

beforeUpload(file, fileList) {
     
  //当打开同一张图片的时候清除上一次的缓存
  if (this.refs.cropper) {
     
    this.refs.cropper.reset();
    this.refs.cropper.setData({
     
      width: this.state.width,
      height: this.state.height,
    });
  }

3.多次截图后面图片会变小，容器变成默认的200*100
第一次上传图片截图时正常，图片大小为原始图片大小

后来在截图发现图片会压缩成很小，查看样式发现为cropper-container恢复默认值200*100

发现单纯的通过setState改变cropper的src有时并不能使图片将cropper容器撑开，达到重新渲染组件的目的，后来查看了官方文档，发现有一个参数replace(url)，作用替换图像的src并重新构建cropper，尝试了一下发现可以重新构建cropper，达到图片撑开容器而不是显示容器默认值得效果。并且加上这个参数之后。连续上传同一张图片也不会显示上一次默认的值了，同一张图片也会当做一张新的图片重新渲染，所以每次给cropper赋值的时候，调用replace函数十分重要，而不是单纯的靠改变cropper的src来实现重新渲染裁剪插件。

this.setState({
     
          srcCropper: e.target.result, //cropper的图片路径
          selectImgName: file.name, //文件名称
          selectImgSize: (file.size / 1024 / 1024), //文件大小
          selectImgSuffix: file.type.split("/")[1], //文件类型
          editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
        })
        if (this.refs.cropper) {
     
          this.refs.cropper.replace(e.target.result);
        }

4.用fetch向后台传输File格式文件，头文件设置问题
将File绑定在formdata里面之后，向后台传递时候，起初手动设置了头文件Content-Type=multipart/form-data，向后台发送数据失败，头文件显示如下，显示的结果没有正常情况下的boundary

看了原生ajax传递数据的代码如下，将contentType设置为false，不设置头文件。因此尝试在fetch时候，不设置contentType的内容。

$.ajax({
     
          url: "upload.ashx",
                type: "POST",
                data: formData,
                /**
                *必须false才会自动加上正确的Content-Type
                */
                contentType: false,
                /**
                * 必须false才会避开jQuery对 formdata 的默认处理
                * XMLHttpRequest会对 formdata 进行正确的处理
                */
                processData: false,
                success: function (data) {
     
                    if (data.status == "true") {
     
                        alert("上传成功！");
                    }
                    if (data.status == "error") {
     
                        alert(data.msg);
                    }
                    $("#imgWait").hide();
                },
                error: function () {
     
                    alert("上传失败！");
                    $("#imgWait").hide();
                }
         })

之后再向后台传递的时候，头文件就显示为正常，自动设置了boundary

以上是所有开发中遇到的问题，欢迎大家一起来讨论

七.完整代码部分
自己封装的cropper-upload组件完整代码

import React, {
      PureComponent } from 'react';
import moment from 'moment';
import {
      routerRedux, Route, Switch, Link } from 'dva/router';
import {
      Upload, Button, Modal, Icon, message } from 'antd';
import "cropperjs/dist/cropper.css"
import Cropper from 'react-cropper'
import {
      connect } from 'dva';
import styles from './Upload.less';

@connect(state => ({
     
imagePictures: state.getData.imagePictures,
}))
class CropperUpload extends PureComponent {
     
constructor(props) {
     
  super(props);
  console.log(props);
  console.log("props");
  this.state = {
     
    width: props.width,
    height: props.height,
    pattern: props.pattern,
    fileList: props.fileList ? props.fileList : [],
    editImageModalVisible: false,
    srcCropper: '',
    selectImgName: '',
  }
}

componentWillReceiveProps(nextProps) {
     
  if ('fileList' in nextProps) {
     
    this.setState({
     
      fileList: nextProps.fileList ? nextProps.fileList : [],
    });
  }
}

handleCancel = () => {
     
  this.setState({
     
    editImageModalVisible: false,
  });
}

// 图片Upload上传之前函数
beforeUpload(file, fileList) {
     
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
      //添加文件限制
    MsgBox.error({
      content: '文件大小不能超过10M' });
    return false;
  }
  var reader = new FileReader();
  const image = new Image();
  var height;
  var width;
  //因为读取文件需要时间,所以要在回调函数中使用读取的结果
  reader.readAsDataURL(file); //开始读取文件
  reader.onload = (e) => {
     
    image.src = reader.result;
    image.onload = () => {
     
      height = image.naturalHeight;
      width = image.naturalWidth;
      if (height < this.state.height || width < this.state.width) {
     
        message.error('图片尺寸不对 宽应大于:'+this.state.width+ '高应大于:' +this.state.height );
        this.setState({
     
          editImageModalVisible: false, //打开控制裁剪弹窗的变量，为true即弹窗
        })
      }
      else{
     
        this.setState({
     
          srcCropper: e.target.result, //cropper的图片路径
          selectImgName: file.name, //文件名称
          selectImgSize: (file.size / 1024 / 1024), //文件大小
          selectImgSuffix: file.type.split("/")[1], //文件类型
          editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
        })
        if (this.refs.cropper) {
     
          this.refs.cropper.replace(e.target.result);
        }
      }
    }
  }
  return false;
}

handleRemove(file) {
     
  this.setState((state) => {
     
    const index = state.fileList.indexOf(file);
    const newFileList = state.fileList.slice();
    newFileList.splice(index, 1);
    this.props.onChange(newFileList);
    return {
     
      fileList: newFileList,
    };
  });
}

//将base64码转化成blob格式
convertBase64UrlToBlob(base64Data) {
     
  var byteString;
  if (base64Data.split(',')[0].indexOf('base64') >= 0) {
     
    byteString = atob(base64Data.split(',')[1]);
  } else {
     
    byteString = unescape(base64Data.split(',')[1]);
  }
  var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
     
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], {
      type: this.state.selectImgSuffix });
}

//将base64码转化为FILE格式
dataURLtoFile(dataurl, filename) {
     
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
     
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
      type: mime });
}

_ready() {
     
  this.refs.cropper.setData({
     
    width: this.state.width,
    height: this.state.height,
  });
}

saveImg() {
     
  const {
      dispatch } = this.props;
  var formdata = new FormData();
  formdata.append("files", this.dataURLtoFile(this.refs.cropper.getCroppedCanvas().toDataURL(), this.state.selectImgName));
  dispatch({
     
    type: 'getData/postimage',
    payload: formdata,
    callback: () => {
     
      const {
      success, msg, obj } = this.props.imagePictures;
      if (success) {
     
        let imageArry = this.state.pattern == 3 ? this.state.fileList.slice() : [];
        imageArry.push({
     
          uid: Math.random() * 100000,
          name: this.state.selectImgName,
          status: 'done',
          url: obj[0].sourcePath,
          // url:obj[0].sourcePath,
          thumbUrl: this.refs.cropper.getCroppedCanvas().toDataURL(),
          thumbnailPath: obj[0].thumbnailPath,
          largePath: obj[0].largePath,
          mediumPath: obj[0].mediumPath,
          upload: true,
        })
        this.setState({
     
          fileList: imageArry,
          editImageModalVisible: false, //打开控制裁剪弹窗的变量，为true即弹窗
        })
        this.props.onChange(imageArry);
      }
      else {
     
        message.error(msg);
      }
    },
  });
}
render() {
     
  const botton = this.state.pattern == 2 ?
    <div>
      <Icon type="plus" />
      <div className="ant-upload-text">Upload</div>
    </div> :
    <Button>
      <Icon type="upload" />选择上传</Button>
  return (
    <div>
      <Upload
        name="files"
        action="/hyapi/resource/image/multisize/upload"
        listType={
     this.state.pattern === 1 ? " " : this.state.pattern === 2 ? "picture-card" : "picture"}
        className={
     this.state.pattern === 3 ? styles.uploadinline : ""}
        beforeUpload={
     this.beforeUpload.bind(this)}
        onRemove={
     this.handleRemove.bind(this)}
        fileList={
     this.state.fileList}
      >
        {
     botton}
      </Upload>
      <Modal
        key="cropper_img_icon_key"
        visible={
     this.state.editImageModalVisible}
        width="100%"
        footer={
     [
          <Button type="primary" onClick={
     this.saveImg.bind(this)} >保存</Button>,
          <Button onClick={
     this.handleCancel.bind(this)} >取消</Button>
        ]}>
        <Cropper
          src={
     this.state.srcCropper} //图片路径，即是base64的值，在Upload上传的时候获取到的
          ref="cropper"
          preview=".uploadCrop"
          viewMode={
     1} //定义cropper的视图模式
          zoomable={
     true} //是否允许放大图像
          movable={
     true}
          guides={
     true} //显示在裁剪框上方的虚线
          background={
     false} //是否显示背景的马赛克
          rotatable={
     false} //是否旋转
          style={
     {
      height: '100%', width: '100%' }}
          cropBoxResizable={
     false}
          cropBoxMovable={
     true}
          dragMode="move"
          center={
     true}
          ready={
     this._ready.bind(this)}
        />
      </Modal>
    </div>
  );
}
}
export default CropperUpload;

页面具体调用范例：

<CropperUpload
     pattern={
     1}//模式分为三种，1为只能上传一张图片，2为上传多张图片
     width={
     375}
     height={
     120}
     onChange={
     this.ChangeIconImage.bind(this)}
     fileList={
     this.state.iconUrl}
   />