xie_fang_tong_admin/CLIENT_UPLOAD_README.md

# 视频客户端上传修改说明

## 修改概述

本次修改将视频上传从服务端上传改为客户端上传，使用阿里云视频点播上传SDK（aliyun-upload-vod）实现直接上传到阿里云视频点播服务。

## 主要修改内容

### 1. 新增依赖包

- `aliyun-upload-vod`: 阿里云视频点播上传SDK，专门用于视频上传
- 移除了 `ali-oss` 和 `@types/ali-oss`

### 2. 新增组件

#### `src/components/AliVideoUpload/index.tsx`

创建了专门的客户端视频上传组件，主要功能：

- 使用阿里云视频点播上传SDK进行客户端上传
- 支持上传进度显示
- 文件类型和大小验证
- 错误处理和用户提示
- 上传成功后返回videoId和playAuth
- **新增**: 可配置的文件大小限制（maxSize参数）
- **新增**: 可配置的文件类型限制（accept参数）
- **新增**: 支持多文件上传（multiple参数）
- **新增**: 最大上传个数限制（maxCount参数）

#### 组件参数

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| value | UploadFile[] | [] | 文件列表 |
| onChange | (fileList: UploadFile[]) => void | - | 文件列表变化回调 |
| onSuccess | (data: any) => void | - | 上传成功回调 |
| disabled | boolean | false | 是否禁用 |
| maxSize | number | 500 | 最大文件大小，单位MB |
| maxCount | number | 9 | 最大上传个数 |
| accept | string | 'video/*' | 接受的文件类型 |
| multiple | boolean | false | 是否支持多文件上传 |

### 3. 修改页面

#### `src/pages/TrainingClasses/detail.tsx`

- 导入新的`AliVideoUpload`组件
- 修改ModalForm中的视频上传部分
- 根据文件类型选择不同的上传方式：
  - 视频文件：使用客户端上传（AliVideoUpload）
  - 其他文件：继续使用服务端上传
- 修改数据处理逻辑，适配客户端上传的数据格式
- **新增**: 设置maxSize={3000}，限制视频文件大小为3000MB
- **新增**: 设置maxCount={1}，限制单次只能上传1个文件

### 4. 服务接口

#### `src/services/pop-b2b2c/pbcVodController.ts`

- 使用现有的`createUploadVideoUsingPost`接口获取上传凭证
- 该接口返回阿里云VOD的上传地址和凭证信息

### 5. 类型定义

#### `src/types/aliyun-upload-vod.d.ts`

- 为aliyun-upload-vod包创建了TypeScript类型定义
- 确保类型安全和开发体验

## 技术实现

### 客户端上传流程

1. **创建上传器**: 使用`AliyunUpload.Vod`创建上传客户端
2. **添加文件**: 调用`addFile`方法添加文件到上传队列
3. **获取上传凭证**: 在`onUploadstarted`回调中调用`createUploadVideoUsingPost`接口获取上传凭证
4. **设置凭证**: 调用`setUploadAuthAndAddress`方法设置上传凭证和地址
5. **开始上传**: 自动开始上传过程
6. **处理结果**: 在`onUploadSucceed`回调中处理上传成功结果

### 关键代码

```typescript
// 创建VOD上传客户端
const uploader = new AliyunUpload.Vod({
  userId: '1303984639806000', // 需要根据实际情况配置
  region: 'cn-shanghai',
  partSize: 1048576,
  parallel: 5,
  retryCount: 3,
  retryDuration: 2,
  onUploadstarted: async (uploadInfo) => {
    // 获取上传凭证
    const uploadAuthData = await getUploadAuth(file.name);
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
  },
  onUploadSucceed: (uploadInfo) => {
    // 处理上传成功
  },
  onUploadProgress: (uploadInfo, totalSize, loadedPercent) => {
    // 更新上传进度
  }
});

// 添加文件到上传队列
uploader.addFile(file, undefined, undefined, undefined, userData);
```

## 使用示例

### 基本使用
```tsx
<AliVideoUpload
  value={fileList}
  onChange={setFileList}
  onSuccess={(data) => {
    console.log('videoId:', data.videoId);
  }}
/>
```

### 自定义文件大小限制
```tsx
<AliVideoUpload
  value={fileList}
  onChange={setFileList}
  maxSize={200} // 限制200MB
  onSuccess={handleSuccess}
/>
```

### 多文件上传
```tsx
<AliVideoUpload
  value={fileList}
  onChange={setFileList}
  multiple={true}
  maxCount={5}
  maxSize={100}
  onSuccess={handleSuccess}
/>
```

## 优势

1. **减少服务器压力**：文件直接从客户端上传到阿里云，不经过业务服务器
2. **提高上传速度**：避免了服务器中转，减少网络延迟
3. **支持断点续传**：aliyun-upload-vod SDK内置断点续传功能
4. **更好的用户体验**：实时显示上传进度
5. **节省服务器带宽**：减少服务器带宽消耗
6. **灵活配置**：支持自定义文件大小、类型和多文件上传
7. **专门优化**：aliyun-upload-vod是专门为视频上传优化的SDK

## 注意事项

1. 确保后端`createUploadVideoUsingPost`接口返回正确的上传凭证格式
2. 上传凭证包含敏感信息，注意安全性
3. 客户端上传需要浏览器支持aliyun-upload-vod SDK
4. 文件大小限制可通过maxSize参数配置（默认500MB）
5. 需要确保阿里云VOD服务配置正确
6. **重要**: 需要配置正确的userId，当前使用的是示例值

## 测试建议

1. 测试小文件上传功能
2. 测试大文件上传和断点续传
3. 测试网络异常情况下的错误处理
4. 验证上传后的视频播放功能
5. 测试不同浏览器兼容性
6. 测试不同的maxSize配置
7. 测试多文件上传功能
8. 测试maxCount限制功能

## 修改的文件列表

1. `src/components/AliVideoUpload/index.tsx` - 新增客户端上传组件
2. `src/components/AliVideoUpload/README.md` - 组件使用说明文档
3. `src/pages/TrainingClasses/detail.tsx` - 修改视频上传逻辑
4. `src/types/aliyun-upload-vod.d.ts` - 新增类型定义文件
5. `package.json` - 更新依赖包
6. `CLIENT_UPLOAD_README.md` - 本说明文档

## 部署注意事项

1. 确保生产环境已安装aliyun-upload-vod依赖
2. 检查阿里云VOD服务配置
3. 验证上传凭证接口的可用性
4. 测试生产环境的网络连接
5. 根据业务需求调整maxSize等参数配置
6. **重要**: 配置正确的userId，替换示例值