前言

文件和图片的上传我们可能经常会去做，antd中也有现成的可直接使用，今天分享一个封装好的图片裁剪库react-cropper

仓库地址：点击此处查看github仓库地址

Demo演示：点击此处查看实际效果

一、下载安装

npm install cropperjs

二、配合antd使用

和Upload组件一起使用

       <Upload
          customRequest={options => {
            options?.onSuccess?.({ data: options.file });
          }}
          onChange={({ file }) => handleLogoChange(file as UploadFile)}
          showUploadList={false}
        >
          <Button size='small' type='link'>
            上传
          </Button>
        </Upload>
        
     // 在弹窗中进行裁剪操作
        <Modal
        title='裁剪LOGO'
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={400}
      >
        <Cropper
          ref={cropperRef}
          style={{ height: 200, width: '100%' }}
          initialAspectRatio={1}
          src={image}
          responsive={true}
          autoCropArea={1}
          checkOrientation={false}
          guides={true}
        />
      </Modal>

具体的api可查看官方文档，已满足开发需求。

选择和裁剪上传操作如下所示：

// 选择图片
const handleLogoChange = async (file: UploadFile) => {
    setImage(URL.createObjectURL(file.originFileObj as File));
    setOriginalFile(file.originFileObj);
    setIsModalOpen(true);
  };
  
// 裁剪后上传
const handleOk = () => {
    if (cropperRef.current) {
      cropperRef.current.cropper.getCroppedCanvas().toBlob(async blob => {
        if (blob && originalFile) {
          const croppedFile = new File([blob], originalFile?.name, {
            type: originalFile?.type,
            lastModified: Date.now(),
          });
          ...
          // 这里可进行你的上传操作
          // 配合后端接口来具体完成
           }
      });
    }
  };

到这里就实现了一个图片的裁剪上传，可支持自定义比例的裁剪。