有没有办法在ant设计图片预览操作中改变图标？

在ant设计图片预览操作中改变图标的方法是使用Ant Design的Upload组件配合自定义样式来实现。

首先，通过Ant Design的Upload组件实现图片上传功能，并设置预览功能。可以使用beforeUpload属性来处理上传之前的逻辑，例如限制文件类型和大小。

然后，在上传成功后，通过自定义样式来改变预览图标。可以通过覆盖Ant Design的默认样式，或者在上传成功后使用JavaScript来修改样式。

以下是一个示例代码：

import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const props = {
  name: 'file',
  action: 'https://www.example.com/upload',
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
      // 在这里修改预览图标的样式，例如添加自定义样式类名
      document.querySelector('.ant-upload-list-item-info').classList.add('custom-icon');
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  },
  beforeUpload(file) {
    // 在这里处理上传前的逻辑，例如限制文件类型和大小
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只支持上传 JPG/PNG 格式的图片');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小必须小于 2MB');
    }
    return isJpgOrPng && isLt2M;
  },
};

<Upload {...props}>
  <Button icon={<UploadOutlined />}>上传图片</Button>
</Upload>

在上述代码中，通过beforeUpload函数限制了上传的文件类型和大小。在onChange事件中，根据文件上传的状态，使用message组件显示上传成功或失败的消息，并在成功后通过document.querySelector方法获取预览图标的元素，然后添加自定义样式类名来改变图标。

需要注意的是，以上代码仅为示例，具体的样式修改需根据实际需求和项目的CSS规范来调整。

关于Ant Design的Upload组件和相关的API文档，可以参考腾讯云的产品介绍链接地址：https://cloud.tencent.com/product/cos