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

最新推荐文章于 2024-08-09 08:19:52 发布

suwyer

最新推荐文章于 2024-08-09 08:19:52 发布

阅读量1.1w

点赞数 2

分类专栏： react 文章标签： react react-cropper 图片裁剪上传 upload

本文链接：https://blog.csdn.net/suwyer/article/details/84027629

版权

本文介绍了如何利用react-cropper插件在React应用中实现实现图片裁剪并上传的功能，包括插件安装、组件引入、渲染结构、文件验证以及提交裁剪图片的详细步骤。此外，还强调了在React中处理上传时需要注意的参数传递方式。

摘要由CSDN通过智能技术生成

因业务需求，需要用户自定义个人头像（图片剪切上传）；调研了之后，决定使用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}}
                    />