...
|
...
|
@@ -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
|
|
|
})
|
|
|
},
|
|
|
|
...
|
...
|
|