feat: 本次更新项目为：
上传组件封装完成
This commit is contained in:
超级老白兔
@@ -1,150 +1,112 @@
|
||||
# Upload 组件
|
||||
# Upload 上传组件
|
||||
|
||||
通用的文件上传组件，基于 Ant Design 的 Upload 组件封装。
|
||||
基于 antd-mobile 的 ImageUploader 组件封装的上传组件，支持图片上传、预览、删除等功能。
|
||||
|
||||
## 组件列表
|
||||
## 功能特性
|
||||
|
||||
### UploadComponent
|
||||
- ✅ 支持单张/多张图片上传
|
||||
- ✅ 文件类型和大小验证
|
||||
- ✅ 上传进度显示
|
||||
- ✅ 图片预览功能
|
||||
- ✅ 删除确认
|
||||
- ✅ 数量限制
|
||||
- ✅ 编辑和新增状态支持
|
||||
- ✅ 响应式设计
|
||||
|
||||
通用的图片/文件上传组件，支持多文件上传。
|
||||
## 使用方法
|
||||
|
||||
#### 使用方法
|
||||
### 基础用法
|
||||
|
||||
```tsx
|
||||
import UploadComponent from '@/components/Upload';
|
||||
import React, { useState } from "react";
|
||||
import UploadComponent from "@/components/Upload";
|
||||
|
||||
// 基础用法
|
||||
<UploadComponent
|
||||
value={imageUrls}
|
||||
onChange={setImageUrls}
|
||||
count={9}
|
||||
accept="image/*"
|
||||
/>
|
||||
const MyComponent = () => {
|
||||
const [images, setImages] = useState<string[]>([]);
|
||||
|
||||
// 单文件上传
|
||||
<UploadComponent
|
||||
value={[singleImage]}
|
||||
onChange={(urls) => setSingleImage(urls[0])}
|
||||
count={1}
|
||||
listType="picture-card"
|
||||
/>
|
||||
return (
|
||||
<UploadComponent
|
||||
value={images}
|
||||
onChange={setImages}
|
||||
count={5}
|
||||
accept="image/*"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|--------|
|
||||
| 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
|
||||
|
||||
专门的视频上传组件，支持单文件上传。
|
||||
|
||||
#### 使用方法
|
||||
### 编辑模式
|
||||
|
||||
```tsx
|
||||
import VideoUpload from '@/components/Upload/VideoUpload';
|
||||
const EditComponent = () => {
|
||||
const [images, setImages] = useState<string[]>([
|
||||
"https://example.com/image1.jpg",
|
||||
"https://example.com/image2.jpg",
|
||||
]);
|
||||
|
||||
<VideoUpload
|
||||
value={videoUrl}
|
||||
onChange={setVideoUrl}
|
||||
disabled={false}
|
||||
/>
|
||||
return (
|
||||
<UploadComponent
|
||||
value={images}
|
||||
onChange={setImages}
|
||||
count={9}
|
||||
disabled={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
#### Props
|
||||
### 禁用状态
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|--------|
|
||||
| value | 已上传的视频URL | `string` | `""` |
|
||||
| onChange | 视频URL变化时的回调 | `(url: string) => void` | - |
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
| className | 自定义样式类名 | `string` | - |
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 上传接口
|
||||
|
||||
- **接口地址**: `/v1/attachment/upload`
|
||||
- **请求方式**: `POST`
|
||||
- **请求格式**: `multipart/form-data`
|
||||
- **文件字段名**: `file`
|
||||
|
||||
### 响应格式
|
||||
|
||||
组件会自动处理以下响应格式：
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"data": "https://example.com/file.jpg",
|
||||
"message": "success"
|
||||
}
|
||||
```tsx
|
||||
<UploadComponent value={images} onChange={setImages} disabled={true} />
|
||||
```
|
||||
|
||||
或者：
|
||||
## API
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"data": {
|
||||
"url": "https://example.com/file.jpg"
|
||||
},
|
||||
"message": "success"
|
||||
}
|
||||
```
|
||||
### Props
|
||||
|
||||
### 文件限制
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | -------------- | -------------------------- | ----------- |
|
||||
| value | 图片URL数组 | `string[]` | `[]` |
|
||||
| onChange | 图片变化回调 | `(urls: string[]) => void` | - |
|
||||
| count | 最大上传数量 | `number` | `9` |
|
||||
| accept | 接受的文件类型 | `string` | `"image/*"` |
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
| className | 自定义类名 | `string` | - |
|
||||
|
||||
- **图片文件**: 最大 5MB
|
||||
- **视频文件**: 最大 50MB
|
||||
- **支持格式**: 根据 `accept` 属性设置
|
||||
### 事件
|
||||
|
||||
### 状态管理
|
||||
|
||||
组件内部管理以下状态：
|
||||
|
||||
- `uploading`: 文件上传中
|
||||
- `done`: 文件上传完成
|
||||
- `error`: 文件上传失败
|
||||
- `removed`: 文件已删除
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| -------- | ------------------ | -------------------------- |
|
||||
| onChange | 图片列表变化时触发 | `(urls: string[]) => void` |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **API 集成**: 组件使用 Ant Design Upload 的 `action` 属性，直接调用 `/v1/attachment/upload` 接口
|
||||
2. **文件验证**: 在 `beforeUpload` 中进行文件类型和大小验证
|
||||
3. **状态同步**: 组件会自动同步 `value` 和内部 `fileList` 状态
|
||||
4. **错误处理**: 上传失败时会显示错误提示并自动清理失败的文件
|
||||
5. **进度显示**: 上传过程中会显示加载状态和进度指示
|
||||
1. **文件大小限制**: 默认限制为 5MB
|
||||
2. **文件类型**: 默认只接受图片文件
|
||||
3. **上传接口**: 使用 `/v1/attachment/upload` 接口
|
||||
4. **认证**: 自动携带 token 进行认证
|
||||
5. **预览**: 点击图片可预览
|
||||
6. **删除**: 删除图片会有确认提示
|
||||
|
||||
## 样式定制
|
||||
|
||||
组件使用 SCSS Modules，可以通过修改 `index.module.scss` 文件来自定义样式：
|
||||
组件支持通过 CSS 模块进行样式定制：
|
||||
|
||||
```scss
|
||||
.upload-container {
|
||||
// 容器样式
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
// 上传按钮样式
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
// 图标样式
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
// 文字样式
|
||||
}
|
||||
|
||||
.uploading {
|
||||
// 上传中状态样式
|
||||
.uploadContainer {
|
||||
// 自定义样式
|
||||
:global {
|
||||
.adm-image-uploader {
|
||||
// 覆盖 antd-mobile 默认样式
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 错误处理
|
||||
|
||||
- 文件类型不匹配时会显示错误提示
|
||||
- 文件大小超限时会显示错误提示
|
||||
- 上传失败时会显示错误提示
|
||||
- 网络错误时会显示错误提示
|
||||
|
||||
Reference in New Issue
Block a user