如何移除Ant Design Upload红色样式并保留antd-img-crop功能

我在使用Ant Design的Upload组件时，明明图片提交修改已成功，但上传的文件仍显示红色错误样式。尝试在beforeUpload中返回false阻止自动上传来解决，却导致antd-img-crop的裁剪功能失效。请问如何在保留antd-img-crop裁剪功能的前提下，移除上传文件的红色样式？

现有代码 #

const [newPicture, setNewPicture] = useState<any[]>([]);

const handleImageUpload = async (info: any) => {
  let fileList = [...info.fileList];
  fileList = fileList.slice(-1);

  fileList = fileList.map((file) => {
    if (file.response) {
      file.url = file.response.url;
    }
    return file;
  });

  setNewPicture(fileList);
};

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 as any)();
  image.src = src;
  const imgWindow = window.open(src);
  imgWindow?.document.write(image.outerHTML);
};

console.log(newPicture);
const toast = useToast();
const navigate = useNavigate();

const handleSubmit = async () => {
  const formData = new FormData();

  if (newPicture) {
    formData.append('profilePhoto', newPicture[0]?.originFileObj || newPicture[0]?.url);
  }
  formData.append('subscribeNewsletter', String(isSubscribe));

  try {
    await fetchFormData({
      method: 'PATCH',
      path: 'member/data',
      data: formData,
    }).then((response) => {
      if (!response.error) {
        toast({
          title: 'Berhasil',
          description: 'Profil Anda telah berhasil diperbaharui',
          status: 'success',
          duration: 9000,
          isClosable: true,
        });
        getMemberData();
      } else {
        toast({
          title: 'Error',
          description: response.message,
          status: 'error',
          duration: 9000,
          isClosable: true,
        });
      }
    });
  } catch (error) {
    toast({
      title: 'Error',
      description: error.message,
      status: 'error',
      duration: 9000,
      isClosable: true,
    });
  }
};

return (
  <ImgCrop cropShape="round">
    <Upload
      action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
      name="Profile Picture"
      listType="picture-circle"
      fileList={newPicture}
      onChange={handleImageUpload}
      onPreview={onPreview}
      // beforeUpload={()=> false}
      showUploadList={{
        showPreviewIcon:false
      }}
    >
      {newPicture.length < 1 && '+ Edit'}
    </Upload>
  </ImgCrop>
);

解决方案 #

红色样式的核心原因是Upload组件根据文件的status属性渲染样式，红色对应error状态。当前使用mock地址作为action，响应不符合Ant Design的预期，导致组件判定上传失败；或是手动提交表单后，未同步更新文件的状态。

以下提供两种兼容antd-img-crop裁剪功能的解决方式：

方案1：保留自动上传，手动设置文件成功状态

修改handleImageUpload函数，强制将文件的status设置为success，覆盖组件的默认状态判定：

const handleImageUpload = async (info: any) => {
  let fileList = [...info.fileList];
  fileList = fileList.slice(-1);

  fileList = fileList.map((file) => {
    // 处理mock响应，设置成功状态
    if (file.response) {
      file.url = file.response.url;
      file.status = 'success'; // 关键：手动标记上传成功
    }
    // 处理裁剪后的本地文件，生成预览URL并标记成功
    if (file.originFileObj && !file.response) {
      file.status = 'success';
      if (!file.url) {
        file.url = URL.createObjectURL(file.originFileObj);
      }
    }
    return file;
  });

  setNewPicture(fileList);
};

方案2：手动控制上传流程，完全接管文件状态

既然最终是通过handleSubmit手动提交FormData，可以让Upload组件不执行自动上传，同时兼容裁剪流程：

1. 添加beforeUpload函数，接收裁剪后的文件并手动添加到fileList，返回false阻止自动上传：

const beforeUpload = (file: RcFile) => {
  // 将裁剪后的文件加入状态，标记为成功
  setNewPicture([{
    originFileObj: file,
    url: URL.createObjectURL(file),
    status: 'success',
    uid: Date.now().toString() // 生成唯一ID避免冲突
  }]);
  return false;
};

2. 修改Upload组件的props：

<Upload
  action="" // 无需自动上传地址
  name="Profile Picture"
  listType="picture-circle"
  fileList={newPicture}
  onChange={handleImageUpload}
  onPreview={onPreview}
  beforeUpload={beforeUpload}
  showUploadList={{
    showPreviewIcon:false
  }}
>
  {newPicture.length < 1 && '+ Edit'}
</Upload>

两种方案都能保留antd-img-crop的裁剪功能，同时移除红色错误样式，可根据你的业务流程选择适配的方式。

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