在使用vue做前端项目需求视频直传阿里云服务器
参考文档(阿里云官方)
https://help.aliyun.com/docum...
导入官方sdk
<script src="/static/aliyun/aliyun-oss-sdk-5.2.0.min.js"></script>
<script src="/static/aliyun/aliyun-upload-sdk-1.4.0.min.js"></script>
input的@change事件
change(event) {
let file = event.target.files[0]
let url = URL.createObjectURL(file)
this.getVideoUploadAuth(file) //获取上传权限
}
采用UploadAuthAndAddress上传方式,后台php获取相关权限
getVideoUploadAuth(file) {
let path = document.getElementById('file').value
let params = {
video_title: file.name,
video_url: path
}
axios.post('https://xxx/aliapi/upload.php', params).then(res => {
uploadAuth = res.data.UploadAuth
uploadAddress = res.data.UploadAddress
videoId = res.data.VideoId
uploader.addFile(file, null, null, null, userData);
this.videoUploadFn() //去上传
})
}
去上传
videoUploadFn() {
uploader.startUpload();
_videoUploadSuccess.ok = false
let interval = setInterval(() => {
if(_videoUploadSuccess.ok) {
clearInterval(interval)
this.getVideoInfo() // 获取视频信息得到视频封面图片
}
, 10);
}
获取视频信息
getVideoInfo() {
let sett
this.$post(`https://xxxx/ali/info.php`,{videoId :_videoUploadSuccess.uploadInfo.videoId}).then(res => {
res = res.data
xmview.showLoading('正在获取缩略图..')
if (res.Video.CoverURL) {
this.posterimg = res.Video.CoverURL
sessionStorage.setItem('video_content',_videoUploadSuccess.uploadInfo.videoId)
sessionStorage.setItem('video_thumb',res.Video.CoverURL)
xmview.hideLoading()
clearTimeout(sett)
} else {
// 这里加定时器,等待响应
sett = setTimeout(() => {
this.getVideoInfo()
}, 3000);
}
})
}
下面是sdk设置
var uploadAuth = ''
var uploadAddress = ''
var videoId = ''
var _videoUploadSuccess = {
ok: false,
uploadInfo: {}
}
var _uploadprogress = 0 // 上传进度
const uploader = new AliyunUpload.Vod({
//分片大小默认1M,不能小于100K
partSize: 1048576,
//并行上传分片个数,默认5
parallel: 5,
//网络原因失败时,重新上传次数,默认为3
retryCount: 3,
//网络原因失败时,重新上传间隔时间,默认为2秒
retryDuration: 2,
// 开始上传
'onUploadstarted': function(uploadInfo) {
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
//上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
},
// 文件上传成功
'onUploadSucceed': function(uploadInfo) {
_videoUploadSuccess.ok = true
_videoUploadSuccess.uploadInfo = uploadInfo
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
},
// 文件上传失败
'onUploadFailed': function(uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
},
// 文件上传进度,单位:字节
'onUploadProgress': function(uploadInfo, totalSize, loadedPercent) {
_uploadprogress = Math.ceil(loadedPercent * 100)
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
},
// 上传凭证超时
'onUploadTokenExpired': function(uploadInfo) {
console.console.log("onUploadTokenExpired");
//上传方式1 实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
uploader.resumeUploadWithAuth(uploadAuth);
// 上传方式2 实现时,从新获取STS临时账号用于恢复上传
// uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
},
//全部文件上传结束
'onUploadEnd': function(uploadInfo) {
console.log("onUploadEnd: uploaded all the files");
}
});
const userData = '{"Vod":{"UserData":{"IsShowWaterMark":"false","Priority":"7"}}}'
2018-10-24
完。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。