背景 :
如上一篇文章提到, 最近后台管理系统需要增加一个功能 - 上传视频, 需要客户端上传到阿里云视频点播, 传送门 客户端上传视频文件到阿里云点播, 不过这里着重说明的是上传视频到vod后, 如何通过vod查询视频url, 并反写到上传视频list里
这里会涉及到部分文件上传组件的代码, 文件上传完整代码在此不赘述, 传送门 【AntDesign】文件自定义上传组件
技术栈 :
React + Antd Pro + Antd + 阿里云js sdk视频点播上传
代码 :
// 上传组件 自定义上传逻辑
const customRequest = async options => {
const {
file } = options
const newFileList = [
...fileList,
{
uid: file.uid,
name: file.name,
status: 'done',
// url: res.path,
lastModified: file.lastModified,
lastModifiedDate: file.lastModifiedDate,
originFileObj: file,
percent: 100,
type: file.type,
image: '',
size: file.size,
},
]
if (newFileList.length > 0) {
// 这里写成异步的原因是把file对象传出去父组件,在父组件进行vod上传并且通过vod查询视频url,再异步返回来, 渲染fileList
handleMediaResource({
type, fileList: newFileList }).then(res => {
setFileList(res)
})
}
}
// 父组件 处理组件上传视频后, 上传vod
const handleMediaResource = val => {
return new Promise((resolve, reject) => {
if (val.fileList.length > 0) {
var a = val.fileList[0]
// 获取上传凭证和地址
dispatch({
type: 'resourceList/getVodUploadCredential',
payload: {
params: {
fileName: a.name,
fileSize: a.size,
title: a.name,
},
file: a,
},
}).then(res => {
// 上传到vod
aliyunVodUpload(res, a).then(fileList => {
resolve(fileList)
})
})
} else {
// 删除视频时
setFieldsValue({
resourceVideo: [] })
resolve([])
}
})
}
// 上传到vod
const aliyunVodUpload = (mes, file2) => {
return new Promise((resolve, reject) => {
var UploadAddress = mes.uploadAddress
var UploadAuth = mes.uploadAuth
var VideoId = mes.videoId
var vod
var uploader = new AliyunUpload.Vod({
userId: '123',
region: 'cn-shanghai',
//分片大小默认1 MB,不能小于100 KB(100*1024)
// partSize: 1000,
//并行上传分片个数,默认5
// parallel: 5,
//网络原因失败时,重新上传次数,默认为3
// retryCount: 3,
//网络原因失败时,重新上传间隔时间,默认为2秒
// retryDuration: 2,
// 添加文件成功
addFileSuccess: function() {
console.log('添加文件成功')
uploader.startUpload()
},
//开始上传
onUploadstarted: function(uploadInfo) {
uploader.setUploadAuthAndAddress(
uploadInfo,
UploadAuth,
UploadAddress,
VideoId
)
},
//文件上传成功
onUploadSucceed: function(uploadInfo) {
if (uploadInfo.videoId) {
vod = uploadInfo.videoId
// 根据上传成功的vod反向查询视频url
dispatch({
type: 'resourceList/getVodPlayInfo',
payload: {
videoId: vod,
},
}).then(videoInfo => {
var v = [
{
uid: videoInfo?.videoId,
name: videoInfo?.title,
url: videoInfo?.playUrl,
title: file2.name,
vod,
file: file2,
},
]
setFieldsValue({
resourceVideo: v })
// 把反向查询后的fileList return给upload子组件去渲染
resolve(v)
})
}
},
//文件上传失败
onUploadFailed: function(uploadInfo, code, message) {
console.log('失败上传')
},
//文件上传进度,单位:字节
onUploadProgress: function(uploadInfo, totalSize, loadedPercent) {
console.log(loadedPercent, 'loadedPercent上传进度')
},
//上传凭证或STS token超时
onUploadTokenExpired: function(uploadInfo) {
console.log('超时上传')
uploader.resumeUploadWithAuth(UploadAuth)
},
//全部文件上传结束
onUploadEnd: function(uploadInfo) {
},
})
let file = file2.originFileObj
uploader.addFile(file, null, null, null, '{"Vod":{}}')
})
}