Ant Design Image Crop裁剪失效：上传原图而非裁剪后图片的问题

核心问题 #

你的代码存在两个关键问题导致裁剪功能失效：

1. beforeUpload={() => false}直接阻断了Upload组件的自动上传逻辑，但你没有补充裁剪后文件的手动上传流程
2. 未监听ImgCrop的onCrop事件，无法获取裁剪后的文件对象，也就无法替换原图进行上传

修复步骤 #

• 移除beforeUpload={() => false}，让Upload组件能自动处理裁剪后的文件上传；若需手动控制上传，可保留该配置并补充对应触发逻辑
• 添加ImgCrop的onCrop事件处理函数，获取裁剪后的Blob文件，替换原文件并更新上传队列
• 调整fileList更新逻辑，确保裁剪后的文件能同步到预览和上传流程中

修改后的完整代码 #

import { useState } from 'react';
import { Upload, UploadFile, UploadProps } from 'antd';
import ImgCrop from 'antd-img-crop';
import { Box } from '@mui/material';
import type { RcFile } from 'antd/es/upload/interface';

const Homepage = () => {
  const [fileList, setFileList] = useState<UploadFile<any>>([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);

  const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  const onPreview = async (file: UploadFile) => {
    let src = file.url as string;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj as RcFile);
        reader.onload = () => resolve(reader.result as string);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow?.document.write(image.outerHTML);
  };

  // 新增裁剪完成后的处理函数
  const handleCrop = async (file: File, blob: Blob) => {
    // 将裁剪后的Blob转为File对象，保留原文件的名称和类型
    const croppedFile = new File([blob], file.name, { type: file.type });
    // 更新fileList，替换当前待上传的文件为裁剪后的文件
    setFileList(prev => {
      const newList = [...prev];
      const targetIndex = newList.findIndex(item => item.originFileObj === file);
      if (targetIndex !== -1) {
        newList[targetIndex] = {
          ...newList[targetIndex],
          originFileObj: croppedFile,
          url: URL.createObjectURL(croppedFile), // 预览裁剪后的图片
          status: 'ready',
        };
      }
      return newList;
    });
  };

  return (
    <Box>
      <div className="centering">
        <ImgCrop onCrop={handleCrop}> {/* 添加onCrop事件监听 */}
          <Upload
            action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
            listType="picture-card"
            fileList={fileList}
            onChange={onChange}
            onPreview={onPreview}
            showUploadList={{
              showPreviewIcon: false
            }}
          >
            {fileList.length < 1 && '+ Upload'}
          </Upload>
        </ImgCrop>
      </div>
    </Box>
  );
};

export default Homepage;

补充说明 #

• onCrop事件会在用户完成裁剪操作后触发，返回原文件和裁剪后的Blob对象，我们将Blob转为标准File对象后替换原文件
• 替换文件后更新了预览URL，确保用户能直观看到裁剪后的效果
• 若需要手动控制上传时机，可保留beforeUpload={() => false}，并在合适场景调用Upload组件的upload方法触发上传

内容的提问来源于stack exchange，提问作者Shitta 25