Joe

xie_fang_tong_admin

You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

5.9 KiB

Raw Permalink Blame History Unescape Escape

视频客户端上传修改说明

修改概述

本次修改将视频上传从服务端上传改为客户端上传，使用阿里云视频点播上传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类型定义
确保类型安全和开发体验

技术实现

客户端上传流程

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

关键代码

// 创建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);

使用示例

基本使用

<AliVideoUpload
  value={fileList}
  onChange={setFileList}
  onSuccess={(data) => {
    console.log('videoId:', data.videoId);
  }}
/>

自定义文件大小限制

<AliVideoUpload
  value={fileList}
  onChange={setFileList}
  maxSize={200} // 限制200MB
  onSuccess={handleSuccess}
/>

多文件上传

<AliVideoUpload
  value={fileList}
  onChange={setFileList}
  multiple={true}
  maxCount={5}
  maxSize={100}
  onSuccess={handleSuccess}
/>

优势

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

注意事项

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

测试建议

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

修改的文件列表

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

部署注意事项

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

5.9 KiB Raw Permalink Blame History Unescape Escape