feat: 本次提交更新内容如下
格式更新一下
This commit is contained in:
75
nkebao/src/components/Upload/README.md
Normal file
75
nkebao/src/components/Upload/README.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# 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` 回调
|
||||
Reference in New Issue
Block a user