vue + elementUI upload组件,前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun-upload-sdk-1.5.2.min.js';2:在上传的页面先声明一个 new××××vod({})对象createUplader(_this) {let uploader = new Aliy
·
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用
import '@/utils/aliyun-oss-sdk-6.13.0.min.js';
import '@/utils/aliyun-upload-sdk-1.5.2.min.js';
2:在上传的页面先声明一个 new ×××× vod({})对象
createUplader(_this) {
let uploader = new AliyunUpload.Vod({
userId: _this.videoDataForm.userId,
partSize: _this.videoDataForm.partSize,
parallel: _this.videoDataForm.parallel,
retryCount: _this.videoDataForm.retryCount,
retryDuration: _this.videoDataForm.retryDuration,
//是否上报上传日志到点播,默认为true
enableUploadProgress: true,
// 开始上传
'onUploadstarted': function(uploadInfo) {
console.log(uploadInfo)
if (!uploadInfo.videoId) {
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口()
//这里主要是前端请求后台刷新上传凭证,接口由后端提供
let params = {
fileName: uploadInfo.file.name
}
uploadVideolist(params).then((res) => {
if (res.code !== 200) {
return _this.$message.error(res.msg)
}
let uploadAuth = res.data.uploadAuth
let uploadAddress = res.data.uploadAddress
let videoId = res.data.videoId
_this.fileName = res.data.fileName
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,
videoId)
_this.$message.success(res.msg)
_this.videoLoading.close()
console.log(res, 'res,res,res,')
})
}
},
// 文件上传成功
'onUploadSucceed': function(uploadInfo) {
console.log(uploadInfo)
_this.videoLoading.close()
},
// 文件上传失败
'onUploadFailed': function(uploadInfo, code, message) {
console.log(uploadInfo)
_this.videoLoading.close()
},
// 文件上传进度,单位:字节
'onUploadProgress': function(uploadInfo, totalSize, loadedPercent) {
console.log(uploadInfo)
},
// 上传凭证超时
'onUploadTokenExpired': function(uploadInfo) {
console.log("onUploadTokenExpired");
//实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
//从点播服务刷新的uploadAuth,设置到SDK里
_this.$message.success('上传文件超时,正在重新上传')
uploader.resumeUploadWithAuth(uploadAuth);
},
//全部文件上传结束
'onUploadEnd': function(uploadInfo) {
console.log("onUploadEnd: uploaded all the files");
_this.$message.success('全部文件上传完毕')
_this.videoLoading.close()
}
});
return uploader
},
3:在element ui组件中的el-upload
<div style="padding-left: 100px;">
<el-upload multiple drag class="videoboxUpload" action="" :show-file-list="false" :auto-upload="false"
accept=".mp4,.flv,.mov,.mp3" :on-change="videoChange" :before-upload="videoBeforeUp" :limit="2">
<div class="upload_div">
<i class="el-icon-upload"></i>
<span class="span_icon">上传视频</span>
</div>
</el-upload>
<div class="msg_video">
<span>注意只能上传.mp4,.flv,.mov,.mp3格式的视频</span>
</div>
<div class="lbvideo_box">
<div class="video_fj">
<el-row :gutter="20">
<el-col :span="10">
<video v-if="videoDataUrl" :src="videoDataUrl"
class="avatar" controls="controls">您的浏览器不支持视频播放</video>
</el-col>
<el-col :span="10" >
</el-col>
</el-row>
</div>
</div>
<div class="video_bot">
<el-button type="primary" @click="toalySaveVideo">保存视频</el-button>
</div>
</div>
4:js部分
export default {
data () {
return {
videoDataUrl: '',
videoLoading:'',
videoData: '',
uploader: '',
videoDataForm: {
userId: '12356',
region: '',
partSize: 1048576,//分片大小
parallel: 5,//并行上传片数
retryCount: 3,//网络失败后重新上传次数
retryDuration: 2, //网络失败后重新上传时间
},
videoId: ''
}
},
5:方法
methods: {
//视频文件钩子改变
videoChange(file, fileList) {
console.log(file)
let _this = this
let fileReader = new FileReader()
fileReader.readAsDataURL(file.raw)
fileReader.onload = function(e) {
_this.videoDataUrl = e.currentTarget.result
}
this.videoData = file
console.log(file.size / 1024 / 1024)
let userData = '{"Vod":{}}'
if (this.uploader) {
this.uploader.stopUpload()
}
this.uploader = this.createUplader(this)
this.uploader.addFile(file.raw, null, null, null, userData)
},
// 视频文件上传前的钩子
videoBeforeUp(file) {
//视频上传大小
const isLt1024M = file.size / 1024 / 1024 < 1024;
if (['video/mp4','video/mp3', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -
1) {
this.$message.error('请上传正确的视频格式');
return false;
}
if (!isLt1024M ) {
this.$message.error('上传视频大小不能超过1GB哦!');
return false;
}
},
// 保存视频
toalySaveVideo() {
this.videoLoading = this.$loading({
lock: true,
text: '正在上传视频文件,请稍后',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.uploader.startUpload()
console.log(this.uploader.startUpload)
},
}
到这里基本可以上传成功了,可以在阿里云的看到自己上传的视频
更多推荐
已为社区贡献2条内容
所有评论(0)