react：react-cropper插件，实现图片裁剪upload上传功能

本文主要是介绍react：react-cropper插件，实现图片裁剪upload上传功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因业务需求，需要用户自定义个人头像（图片剪切上传）；调研了之后，决定使用react-cropper插件来实现头像上传功能！

react-cropper插件还是很全面不错的， 满足了功能的需要。

步骤实现：

1、安装

      npm install --save react-cropper

2、文件引入

      import "cropperjs/dist/cropper.css"

      import Cropper from 'react-cropper'

3、render结构

render() {return (<div><div><div><Cropper style={{ width: "300", height: "200" }}aspectRatio={1} preview=".uploadCrop"guides={false} src={this.state.src}ref={cropper => {this.cropper = cropper}}/>

这篇关于react：react-cropper插件，实现图片裁剪upload上传功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---