バックグラウンド ：
前回の記事で述べたように、最近バックグラウンド管理システムにはビデオをアップロードする機能を追加する必要があり、クライアントは Alibaba Cloud VOD にアップロードする必要があり、ポータル クライアントはビデオ ファイルを Alibaba Cloud VOD にアップロードしますが、ここで重点を置くのはAfter vod にビデオをアップロードする方法、vod を通じてビデオ URL をクエリし、アップロードされたビデオ リストに書き戻す方法。
これには、いくつかのファイル アップロード コンポーネントのコードが含まれます。完全なファイル アップロード コードについては、ここでは説明しません。ポータル[AntDesign] ] ファイルのカスタム アップロード コンポーネント
テクノロジースタック:
React + Antd Pro + Antd + Alibaba Cloud 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":{}}')
})
}