react-cropper组件在项目中的应用（实现先裁剪后上传效果）

最新推荐文章于 2024-08-09 08:34:55 发布

天府第5街①号切图仔

最新推荐文章于 2024-08-09 08:34:55 发布

阅读量3.8k

点赞数 4

文章标签： react-cropper 图片裁剪图片上传

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/hemyWeb/article/details/89309321

版权

本文介绍了如何在Ant Design Pro项目中利用react-cropper组件完成图片裁剪，确保上传的企业Logo为规则正方形。文章详细阐述了组件的安装、配置以及与Antd Upload组件结合使用的过程，最终实现图片选择、裁剪、压缩和上传的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司项目在做一个求职工具类的小程序，小程序端有企业Logo的显示，为了保证图片在小程序端的展示效果，所以要求在后台管理系统进行企业Logo上传时需要限定上传的图片尺寸和比例。
为了减少管理人员的录入成本，需要在Logo上传前进行裁剪操作，保证上传进来的图片都是规则的正方形。此处用到了react-cropper组件，本文主要介绍了react-cropper组件在Ant Design Pro项目中的应用。

为了解决各位看官的时间，先来看最终实现的效果，如果能够帮到你，再往下看~

点击“选择图片”按钮，弹出窗口，选择文件；
图片选择成功后直接打开Modal，并将选择的图像绑定在Modal上（熊猫本熊镇楼）；

3. 裁剪之后点击“确认上传”，上传成功后，关闭Modal，将图片绑定在表单页面的展示框中，齐活~

流程就是这么个流程，接下来开撸~ 首先，考虑到后期可能还会在其他位置使用到该组件，并且为了保持原页面的代码整洁，所以考虑将该组件进行二次封装。

国际惯例的第一步：先安装react-cropper依赖。
如果安装之后有问题引入样式有问题，将node_modules目录删除之后重新安装即可。

npm install react-cropper

如果需要进行图片压缩，再安装lrz组件：

npm install lrz

由于我们的项目是基于Ant Design Pro的，所以直接在src目录下的components目录下新建一个全局组件，命名为ImgCropper；

然后，引入组件，如下图，准备工作完成（此处不再赘述，相信你找到这篇文章时已经做好了这些）

先看render结构

    render() {
   
        // 考虑靠组件复用，裁剪Modal的标题作为属性从组件外部传递进来
        const {
    title } = this.props;
        /**
         * srcCropper：cropper组件内部图片的url
         * visible：裁剪Modal的显示属性
         * confirmLoading：图片上传过程中Modal的Loading效果
         * */
        const {
    srcCropper, visible, confirmLoading } = this.state;
        return (
          <div>
            <Upload beforeUpload={
   this.beforeUpload} showUploadList={
   false}>
              <Button>
                <Icon type="upload" /> 选择图片
              </Button>
            </Upload>
            <Modal
              title={
   title}
              visible={
   visible}
              onOk={
   this.saveImg}
              onCancel={
   this.onCloseModal}
              okText="确认上传"
              confirmLoading={
   confirmLoading}
            >
              <div className={
   styles.previewHeader}>
                {
   srcCropper ? (
                  <div className={
   styles.previewOutter}>
                    <div className