|
|
# 视频客户端上传修改说明
|
|
|
|
|
|
## 修改概述
|
|
|
|
|
|
本次修改将视频上传从服务端上传改为客户端上传，使用阿里云视频点播上传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，替换示例值 |