76 lines
2.5 KiB
Markdown
76 lines
2.5 KiB
Markdown
|
# Upload 上传组件
|
|||
|
|
|
|||
|
|
基于 antd Upload 组件封装，简化了 API 请求和文件验证逻辑。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- ✅ 自动处理文件上传 API 请求
|
|||
|
|
- ✅ 文件类型和大小验证
|
|||
|
|
- ✅ 支持编辑和新增场景
|
|||
|
|
- ✅ 支持单文件和多文件上传
|
|||
|
|
- ✅ 上传状态显示
|
|||
|
|
- ✅ 文件删除功能
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 图片上传组件 (UploadComponent)
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import UploadComponent from '@/components/Upload';
|
|||
|
|
|
|||
|
|
// 单图片上传
|
|||
|
|
<UploadComponent
|
|||
|
|
value={imageUrl ? [imageUrl] : []}
|
|||
|
|
onChange={(urls) => setImageUrl(urls[0] || "")}
|
|||
|
|
count={1}
|
|||
|
|
accept="image/*"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
// 多图片上传
|
|||
|
|
<UploadComponent
|
|||
|
|
value={imageUrls}
|
|||
|
|
onChange={setImageUrls}
|
|||
|
|
count={9}
|
|||
|
|
accept="image/*"
|
|||
|
|
listType="picture-card"
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 视频上传组件 (VideoUpload)
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import VideoUpload from "@/components/Upload/VideoUpload";
|
|||
|
|
|
|||
|
|
<VideoUpload value={videoUrl} onChange={setVideoUrl} />;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Props
|
|||
|
|
|
|||
|
|
### UploadComponent
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|||
|
|
| --------- | -------------- | --------------------------------------- | ---------------- |
|
|||
|
|
| value | 文件 URL 数组 | `string[]` | `[]` |
|
|||
|
|
| onChange | 文件变化回调 | `(urls: string[]) => void` | - |
|
|||
|
|
| count | 最大上传数量 | `number` | `9` |
|
|||
|
|
| accept | 接受的文件类型 | `string` | `"image/*"` |
|
|||
|
|
| listType | 列表类型 | `"text" \| "picture" \| "picture-card"` | `"picture-card"` |
|
|||
|
|
| disabled | 是否禁用 | `boolean` | `false` |
|
|||
|
|
| className | 自定义类名 | `string` | - |
|
|||
|
|
|
|||
|
|
### VideoUpload
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|||
|
|
| --------- | ------------ | ----------------------- | ------- |
|
|||
|
|
| value | 视频 URL | `string` | `""` |
|
|||
|
|
| onChange | 视频变化回调 | `(url: string) => void` | - |
|
|||
|
|
| disabled | 是否禁用 | `boolean` | `false` |
|
|||
|
|
| className | 自定义类名 | `string` | - |
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 组件内部使用 `/v1/attachment/upload` 接口进行文件上传
|
|||
|
|
2. 图片文件大小限制为 5MB，视频文件大小限制为 50MB
|
|||
|
|
3. 支持编辑场景，传入 `value` 时会自动显示已上传的文件
|
|||
|
|
4. 文件上传成功后会自动调用 `onChange` 回调
|