antd中的upload结合cropper.js上传裁切组件

该组件支持切换比列裁切、实时预览、图片旋转灯多种自定义功能。只要你仔细阅读cropper文档，就能轻松实现您想要的效果。

image.png

上传组件相关配置

// 上传文件路径
export const UPLOAD_FILE_URL = `${BASEURL}/audit/file/upload/image`;
export const errorImg = require('@/assets/error.png');
export const acceptType= ['jpg', 'png', 'jpeg', 'gif'];
export const maxFileSize=  5;

下面简单的实现代码

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable prefer-const */
/* eslint-disable react/jsx-boolean-value */
/* eslint-disable spaced-comment */
/* eslint-disable react/self-closing-comp */
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Upload, message, Modal, Button, Radio, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

import { UPLOAD_FILE_URL, acceptType, maxFileSize } from '@/pages/constants';

import styles from './index.module.less';

const uploadButton = (
  

    
    
上传
  
);

let blobFile = null;

function UploadCropper(props) {
  const cropRef = useRef(null);
  const [fileImgInfo, setFileImgInfo] = useState({});
  const [cropVisible, setCropVisible] = useState(false);
  // 设置裁切比例
  const setAspectRatio = (e) => {
    cropRef.current.cropper.setAspectRatio(e.target.value);
  };

  // 设置旋转角度
  const setRotateTo = (value) => {
    cropRef.current.cropper.rotate(value);
  };

  // 取消裁切，关闭弹窗
  const cancelCropper = () => {
    setCropVisible(false);
  };

  // 确认裁切
  const saveCropper = () => {
    cropRef.current.cropper.getCroppedCanvas().toBlob((blob) => {
      blobFile = blob;
    }, 'image/png');
  };

  // 临时文件
  const [fileList, setFileList] = useState([]);

  const beforeUpload = (file) => {
    // 校验文件类型
    const reg = new RegExp(`.(${acceptType.join('|')})$`, 'i');
    if (!reg.test(file.type)) {
      message.error(`文件类型只支持${acceptType.join(',')}类型`);
      return false;
    }
    // 校验文件大小
    if (file.size / 1024 / 1024 > maxFileSize) {
      message.error(`上传文件大小不能超过${maxFileSize}M`);
      return false;
    }

    // 启动裁切模块
    let reader = new FileReader();
    //开始读取文件
    reader.readAsDataURL(file);
    // 因为读取文件需要时间,所以要在回调函数中使用读取的结果
    reader.onload = (e) => {
      // 打开裁切modal
      setCropVisible(true);
      // 保存文件
      setFileImgInfo({
        src: e.target.result, //cropper的图片路径
        filename: file.name, //文件名称
        size: file.size / 1024 / 1024, //文件大小
        type: file.type.split('/')[1], //文件类型
        uid: file.uid,
      });
    };

    // 根据条件  是否继续中断上传
    return new Promise((resolve, reject) => {
      let index = setInterval(() => {
        // 监听裁剪是否完成
        if (blobFile) {
          // 需要给裁剪后的blob对象设置uid，否则会报错！！！
          blobFile.uid = file.uid;
          blobFile.name = file.name;
          // 执行后续的上传操作
          resolve(blobFile);
          // 关闭裁切modal
          setCropVisible(false);

          // 清空
          blobFile = null;
          window.clearInterval(index);
        }
      }, 100);
    });
  };

  // 上传流程
  const handleChange = (info) => {
    const { status = '' } = info.file;
    if (status === 'done') {
      setFileList([
        ...fileList,
        {
          uid: new Date(),
          url: info.file.response.data.fileUrl,
          imageKey: info.file.response.data.imageKey,
          originalUrl: info.file.response.data.fileUrl,
          width: info.file.response.data.width,
          height: info.file.response.data.height,
        },
      ]);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };

  return (
    <>
      
        {fileList.length < 3 && uploadButton}
      

       cancelCropper()}
      >
        

          
            
              
            
            
              


              
                16:9
                9:16
                4:3
              
            
          

          
            
              
                 setRotateTo(-90)}>左旋转
                 setRotateTo(-15)}>-15°
                 setRotateTo(-30)}>-30°
                 setRotateTo(-45)}>-45°
              
            
            
              
                 setRotateTo(90)}>右旋转
                 setRotateTo(15)}>15°
                 setRotateTo(30)}>30°
                 setRotateTo(45)}>45°
              
            
            
               saveCropper()}>
                确认
              
            
          
        
      
    
  );
}

export default UploadCropper;