Authored by 周少峰

'v'

... ... @@ -79,18 +79,18 @@
<tr style="height: 155px">
<td style="width:100%;">
<span style="color:red">*</span><label style="font-size: 14px;">上传视频</label> <br>
<a href="javascript:void(0);" class="btn btn-default" @click="videoAdd" style="background: #428bca; border-radius: 5px; color:#fff; text-decoration: none; padding: 6px 10px;">选择视频+</a><span style="margin-left: 20px; height: 30px; width: 30px; border-radius: 30px; line-height: 30px; text-align: center; background: #aaa; display: inline-block">{{videoUploaderInfo.progress * 100}}%</span><br>
<span style="color:red"> 请上传比例为16:9横版或9:16竖版视频素材,大小不超过200M,时长不超过90s</span><br>
<a href="javascript:void(0);" class="btn btn-default" @click="videoAdd" style="background: #428bca; border-radius: 5px; color:#fff; text-decoration: none; padding: 6px 10px;">选择视频+</a><span style="margin-left: 20px; height: 30px; width: 30px; border-radius: 30px; line-height: 30px; text-align: center; background: #aaa; display: inline-block">{{videoUploaderInfo.progress}}%</span><br>
<span style="color:red"> 请上传比例为16:9横版或9:16竖版视频素材,大小不超过50M,时长不超过180s</span><br>
<input id="videoUrl" type="text" name="videoUrl" :value="videoUploaderInfo.videoUrl" style="padding: 0; border: 1px solid #aaa; width: 545px;height: 30px; line-height: 30px;"><a style="height: 30px; line-height: 30px; border: 1px solid #aaa; color: #000; text-decoration: none; padding: 0px 15px; display: inline-block; border-left: 0px;" href="javascript:(0);" data-clipboard-action="copy" class="copy" data-clipboard-target="#videoUrl">复制</a>
<input type="file" style="display:none;" ref="videoFile" @change="videoUpload" />
<input type="file" style="display:none;" ref="videoFile" id="videoFile" @change="videoUpload" />
<input type="file" style="display:none;" ref="videoCoverFile" @change="videoCoverUpload" />
</td>
</tr>
<tr style="height: 80px">
<td style="width:100%;">
<label style="font-size: 14px;">上传封面</label><br>
<span style="color:red">*</span><label style="font-size: 14px;">上传封面</label><br>
<template v-if="videoUploaderInfo.coverImg">
<img :src="videoUploaderInfo.coverImg" width="150"><br>
<input id="imgs" name="articleImages" :value="videoUploaderInfo.coverImg" hidden="hidden"/>
... ... @@ -953,6 +953,7 @@
// state
data () {
return {
upload: false,
articleId: data ? data.articleId : 0,
videoUploaderInfo: {
progress: 0,
... ... @@ -976,19 +977,28 @@
this.$refs.videoCoverFile.click()
},
videoUpload: function () {
if (this.upload) {
$.messager.alert("提示","上传中!!", "info");
return;
}
var self = this;
var mediaFile = this.$refs.videoFile.files[0];
if (mediaFile.type != "video/mp4") {
$.messager.alert("提示","仅仅 MP4 格式视频!!", "error");
this.$refs.videoFile.value = "";
return;
}
if (mediaFile.size > 1024*1024*100) {
$.messager.alert("提示","视频最大支持100M!!", "error");
this.$refs.videoFile.value = "";
return;
}
this.upload = true;
var uploader = this.tcVod.upload({
mediaFile: mediaFile,
})
this.$refs.videoFile.value = "";
self.videoUploaderInfo = {
videoInfo: uploader.videoInfo,
isVideoUploadSuccess: false,
... ... @@ -1002,7 +1012,8 @@
},
}
uploader.on('media_progress', function (info) {
self.videoUploaderInfo.progress = Math.round(info.percent);
console.log(self.videoUploaderInfo, info);
self.videoUploaderInfo.progress = Math.round(info.percent*100);
})
uploader.on('media_upload', function (info) {
self.videoUploaderInfo.isVideoUploadSuccess = true;
... ... @@ -1011,6 +1022,7 @@
uploader.done().then(function(doneResult) {
self.videoUploaderInfo.fileId = doneResult.fileId;
self.videoUploaderInfo.videoUrl = doneResult.video.url;
self.upload = false
})
},
... ...