cunkebao_v3/nkebao/src/components/Upload/README.md

# Upload 组件使用说明

## MainImgUpload 主图封面上传组件

### 功能特点

- 只支持上传一张图片作为主图封面
- 上传后右上角显示删除按钮
- 支持图片预览功能
- 响应式设计，适配移动端
- 样式参考VideoUpload组件风格

### 使用方法

```tsx
import MainImgUpload from "@/components/Upload/MainImgUpload";

const MyComponent = () => {
  const [mainImage, setMainImage] = useState<string>("");

  return (
    <MainImgUpload
      value={mainImage}
      onChange={setMainImage}
      maxSize={5} // 最大5MB
      showPreview={true} // 显示预览按钮
      disabled={false}
    />
  );
};
```

### Props 参数

| 参数        | 类型                  | 默认值 | 说明             |
| ----------- | --------------------- | ------ | ---------------- |
| value       | string                | ''     | 当前图片URL      |
| onChange    | (url: string) => void | -      | 图片URL变化回调  |
| disabled    | boolean               | false  | 是否禁用         |
| className   | string                | -      | 自定义样式类名   |
| maxSize     | number                | 5      | 最大文件大小(MB) |
| showPreview | boolean               | true   | 是否显示预览按钮 |

### 样式特点

- 上传区域：200x200px 的虚线边框区域
- 图片预览：上传后显示图片，鼠标悬停显示操作按钮
- 删除按钮：右上角红色删除图标
- 预览按钮：眼睛图标，点击在新窗口预览
- 响应式：移动端自动调整尺寸

### 文件结构

```
src/components/Upload/
├── MainImgUpload.tsx          # 主图上传组件
├── mainImgUpload.module.scss  # 主图上传样式
├── VideoUpload.tsx            # 视频上传组件
└── index.module.scss          # 通用上传样式
```

### 技术实现

- 基于 antd Upload 组件
- 使用 antd-mobile 的 Toast 提示
- 支持 FormData 上传
- 自动处理文件验证和错误提示
- 集成项目统一的API请求封装