Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

视频封面选取功能

Browse Source
This commit is contained in:
xiezhijun
2021-06-17 14:57:23 +08:00
parent 1151507eb6
commit a731b57bdc
8 changed files with 371 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
stdiet-ui/src/api/custom/nutritionalVideo.js
View File

@ -78,3 +78,23 @@ export function getVideoPlayUrlById(id) {
})
}
// 根据视频videoId提交视频截图请求
export function submitVideoSnapshot(id) {
return request({
url: '/custom/nutritionalVideo/submitVideoSnapshot',
method: 'get',
params: {'videoId': id}
})
}
//根据视频videoId获取视频截图
export function getVideoSnapshot(id) {
return request({
url: '/custom/nutritionalVideo/getVideoSnapshot',
method: 'get',
params: {'videoId': id}
})
}

2
stdiet-ui/src/components/FileUpload/UploadFile.vue
View File

@ -8,7 +8,7 @@
:accept="'.png,.jpg'"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl || coverUrl" :src="imageUrl || coverUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<i v-else class="el-icon-plus avatar-uploader-icon" title="手动上传图片"></i>
<div class="el-upload__tip" slot="tip" style="color:#1890ff">
<el-button v-if="imageUrl || coverUrl" size="small" type="danger" @click="removeFile">移除</el-button>

119
stdiet-ui/src/components/UploadVideo/index.vue
View File

@ -17,15 +17,11 @@
placeholder="请输入视频描述"
v-model.trim="videoFrom.description"
maxlength="1000"
rows="3"
rows="2"
show-word-limit
/>
</el-form-item>
<el-form-item label="视频封面" prop="coverUrl">
<UploadFile ref="uploadFile" :prefix="'videoCover'" @callbackMethod="handleCoverUrl" :tips="'视频未传封面图片时，会主动截取封面，但会存在延迟，请勿直接发布到小程序'"></UploadFile>
</el-form-item>
<div style="display:flex">
<div style="display:flex">
<el-form-item label="视频类别" prop="cateId" style="width:300px">
<treeselect
v-model="videoFrom.cateId"
@ -46,40 +42,47 @@
</el-select>
</el-form-item>
</div>
<el-form-item label="视频文件" prop="file">
<div>
<input type="file" accept=".mp4" ref="videoFile" id="videoFile" @change="fileChange($event)">
<div > <span>上传状态：{{statusText}}</span><span style="margin-left:100px">进度：{{authProgress}}%</span></div>
<div style="color:#1890ff">
1、只能上传mp4文件，上传大文件时请使用客户端上传，防止上传超时
<el-button type="primary" @click="authUpload" :disabled="uploadDisabled" size="small" icon="el-icon-upload2">上传视频</el-button><span style="margin-left:20px">1、只能上传mp4格式视频</span>
</div>
</div>
</el-form-item>
<el-form-item label="视频封面" prop="coverUrl">
<UploadFile ref="uploadFile" :prefix="'videoCover'" :coverUrl="videoFrom.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
<el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" :disabled="!uploadVideoFlag" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
</el-form-item>
<el-form-item label="展示状态" prop="wxShow">
<el-switch
v-model="videoFrom.wxShow"
active-text="小程序展示"
inactive-text="小程序不展示">
active-text="展示"
inactive-text="不展示">
</el-switch>
<div style="color:red">提示：请保证内容正确再展示到小程序</div>
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="authUpload" :disabled="uploadDisabled">开始上传</el-button>
<el-button type="primary" @click="submitVideoForm">保存</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
<!-- 手动选择封面 -->
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
</el-dialog>
</template>
<script>
import axios from 'axios'
import {getUploadVideoAuth,addNutritionalVideo } from "@/api/custom/nutritionalVideo";
import {getUploadVideoAuth,addNutritionalVideo,getVideoSnapshot,submitVideoSnapshot } from "@/api/custom/nutritionalVideo";
import {getAllClassify } from "@/api/custom/videoClassify";
import UploadFile from "@/components/FileUpload/UploadFile";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import VideoSelectCover from "@/components/VideoSelectCover";
export default {
name: "UploadVideo",
data () {
@ -122,6 +125,8 @@
statusText: '',
fileType:['mp4','MP4'],
uploading: false,
//视频是否上传成功标识
uploadVideoFlag: false
}
},
created(){
@ -142,7 +147,7 @@
},
components: {
UploadFile,Treeselect, IconSelect
UploadFile,Treeselect, IconSelect,VideoSelectCover
},
methods: {
showDialog(classifyList, callback){
@ -167,7 +172,8 @@
tags: null,
payLevel: this.defaultPayLevel ? parseInt(this.defaultPayLevel) : null,
videoId: null,
wxShow: false
wxShow: false,
previewUrl: null
};
if(this.$refs.uploadFile){
this.$refs.uploadFile.resetUpload();
@ -180,11 +186,53 @@
this.uploader = null;
this.statusText = '';
this.uploading = false;
this.uploadVideoFlag = false;
this.resetForm("videoFrom");
},
submitVideoForm(){
this.$refs["videoFrom"].validate((valid) => {
if (valid) {
//视频分类不能选择主分类
if(this.videoFrom.cateId == 0){
this.$message({
message: "视频分类不能选择主分类",
type: "warning",
});
return;
}
if(this.uploading){
this.$message({
message: "视频正在上传，请勿取消",
type: "warning",
});
return;
}
if(!this.uploadVideoFlag){
this.$message({
message: "请先上传视频再保存",
type: "warning",
});
return;
}
this.videoFrom.showFlag = this.videoFrom.wxShow ? 1 : 0;
addNutritionalVideo(this.videoFrom).then(response => {
if (response.code === 200) {
this.msgSuccess("视频保存成功");
this.open = false;
this.callback && this.callback();
}
})
}
});
},
selectVideoCover(){
this.$refs.videoSelectCoverRef.showDialog(this.videoFrom,(url)=>{
//console.log(url);
this.videoFrom.previewUrl = url;
this.videoFrom.coverUrl = url;
});
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
@ -205,7 +253,7 @@
cancel(){
if(this.uploading){
this.$message({
message: "文件正在上传，请勿取消",
message: "视频正在上传，请勿取消",
type: "warning",
});
return;
@ -219,7 +267,7 @@
if (valid) {
if(this.uploading){
this.$message({
message: "文件正在上传，请勿取消",
message: "视频正在上传，请勿取消",
type: "warning",
});
return;
@ -242,7 +290,7 @@
this.videoFrom.fileName = this.file.name;
if(this.videoFrom.fileName == null || this.videoFrom.fileName.length == 0 || this.videoFrom.fileName.lastIndexOf(".") == -1){
this.$message({
message: "当前文件名称错误",
message: "当前视频名称错误",
type: "warning",
});
return;
@ -250,7 +298,7 @@
let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
if(this.fileType.indexOf(fileType) == -1){
this.$message({
message: "当前文件格式错误",
message: "当前视频格式错误",
type: "warning",
});
return;
@ -268,8 +316,8 @@
this.resumeDisabled = true
}
})
}
});
}
});
},
authUpload () {
// 然后调用 startUpload 方法, 开始上传
@ -309,7 +357,7 @@
addFileSuccess: function (uploadInfo) {
self.uploadDisabled = false
self.resumeDisabled = false
self.statusText = '添加文件成功, 等待上传...'
self.statusText = '添加视频成功, 等待上传...'
console.log("addFileSuccess: " + uploadInfo.file.name)
},
// 开始上传
@ -322,32 +370,32 @@
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
uploader.setUploadAuthAndAddress(uploadInfo, self.uploadAuth.uploadAuth, self.uploadAuth.uploadAddress, self.uploadAuth.videoId)
self.statusText = '文件开始上传...'
self.statusText = '视频开始上传...'
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
self.statusText = '文件上传成功!'
self.statusText = '视频上传成功!'
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
self.uploading = false;
self.statusText = '文件上传失败!'
self.statusText = '视频上传失败!'
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
self.statusText = '文件已暂停上传'
self.statusText = '视频已暂停上传'
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
let progressPercent = Math.ceil(progress * 100)
self.authProgress = progressPercent
self.statusText = '文件上传中...'
self.statusText = '视频上传中...'
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
@ -360,23 +408,20 @@
uploader.resumeUploadWithAuth(uploadAuth)
console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
})*/
self.statusText = '文件上传超时...';
self.statusText = '视频上传超时...';
self.uploading = false;
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
self.statusText = '文件上传完毕'
self.statusText = '视频上传完毕'
self.uploading = false;
//self.msgSuccess("上传成功");
self.videoFrom.showFlag = self.videoFrom.wxShow ? 1 : 0;
addNutritionalVideo(self.videoFrom).then(response => {
if (response.code === 200) {
self.msgSuccess("视频上传成功");
self.open = false;
self.callback && self.callback();
self.uploadVideoFlag = true;
submitVideoSnapshot(self.videoFrom.videoId).then(response => {
if(response.code == 200){
console.log("-- 截图成功 --");
}
})
})
}
})
return uploader

69
stdiet-ui/src/components/VideoSelectCover/index.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<el-dialog title="选择视频封面（每隔两秒一张截图，共十张）" :visible.sync="open" width="650px" style="height: 80%; overflow: auto;" :close-on-click-modal="true" :show-close="true" append-to-body>
<div v-if="!showFlag"><el-divider>{{showStatusText}}</el-divider></div>
<div v-else class="demo-image__lazy" style="margin-left:20px;">
<div v-for="url in videoSnapshotList" :key="url">
<el-image :src="url" lazy style="width:550px;height:300px;margin-top:10px;cursor:pointer" title="点击选择" @click="selectVideoSnapshot(url)"></el-image>
<el-divider></el-divider>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import axios from 'axios'
import {getVideoSnapshot } from "@/api/custom/nutritionalVideo";
export default {
name: "VideoSelectCover",
data () {
return {
open: false,
videoData: null,
callback: undefined,
showFlag: false,
showStatusText:"加载中...",
videoSnapshotList:[]
}
},
created(){
},
components: {
},
methods: {
showDialog(data,callback){
if(data && data.videoId != null){
this.videoSnapshotList = [];
this.showFlag = false;
this.showStatusText = "加载中...";
this.open = true;
this.videoData = data;
this.callback = callback;
this.getVideoSnapshot();
}
},
getVideoSnapshot(){
getVideoSnapshot(this.videoData.videoId).then(response => {
if(response.code == 200 && response.data.length > 0){
this.videoSnapshotList = response.data;
this.showFlag = true;
}else{
this.showStatusText = "暂无截图数据！"
}
})
},
selectVideoSnapshot(url){
this.callback && this.callback(url);
this.open = false;
},
cancel(){
this.open = false;
}
}
}
</script>

65
stdiet-ui/src/views/custom/nutritionalVideo/index.vue
View File

@ -9,7 +9,7 @@
size="small"
/>
</el-form-item>
<el-form-item label="小程序展示状态" prop="showFlag" label-width="200">
<el-form-item label="展示状态" prop="showFlag" label-width="200">
<el-select
v-model="queryParams.showFlag"
placeholder="请选示状态"
@ -131,7 +131,7 @@
<!--<el-table-column label="标签" align="center" prop="tags" width="100"/>-->
<el-table-column label="分类" align="center" prop="cateName" width="100"/>
<el-table-column label="权限等级" align="center" prop="payLevelName" width="100"/>
<el-table-column label="小程序展示状态" align="center" prop="showFlag" width="200">
<el-table-column label="展示状态" align="center" prop="showFlag" width="200">
<template slot-scope="scope" >
<el-switch
v-model="scope.row.wxShow"
@ -208,20 +208,26 @@
show-word-limit
/>
</el-form-item>
<el-form-item label="视频封面" prop="coverUrl">
<UploadFile ref="uploadFile" v-if="open" :prefix="'videoCover'" :coverUrl="form.previewUrl" @callbackMethod="handleCoverUrl" :tips="'视频未传封面图片时，会主动截取封面，但会存在延迟，请勿直接发布到小程序'"></UploadFile>
</el-form-item>
<el-form-item label="视频类别" prop="cateId">
<el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
<div style="display:flex">
<el-form-item label="视频类别" prop="cateId" style="width:300px">
<!--<el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
<el-option
v-for="classify in classifyList"
:key="classify.id"
:label="classify.cateName"
:value="classify.id"
/>
</el-select>
</el-select>-->
<treeselect
v-model="form.cateId"
:options="classifyList"
:normalizer="normalizer"
:show-count="true"
placeholder="选择分类"
style="width:200px"
/>
</el-form-item>
<el-form-item label="视频权限" prop="payLevel">
<el-form-item label="视频权限" prop="payLevel" style="margin-left:40px">
<el-select v-model="form.payLevel" clearable filterable placeholder="请选择权限">
<el-option
v-for="dict in payVideoLevelList"
@ -231,13 +237,18 @@
/>
</el-select>
</el-form-item>
</div>
<el-form-item label="视频封面" prop="coverUrl">
<UploadFile ref="uploadFile" v-if="open" :prefix="'videoCover'" :coverUrl="form.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
<el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
</el-form-item>
<el-form-item label="展示状态" prop="wxShow">
<el-switch
v-model="form.wxShow"
active-text="小程序展示"
inactive-text="小程序不展示">
active-text="展示"
inactive-text="不展示">
</el-switch>
<div style="color:red">提示：请保证内容正确再展示到小程序</div>
<div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
</el-form-item>
</el-form>
@ -255,6 +266,9 @@
<VideoClassify ref="videoClassifyRef"></VideoClassify>
</div>
</el-dialog>
<!-- 手动选择封面 -->
<VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
</div>
</template>
@ -268,6 +282,7 @@
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import VideoSelectCover from "@/components/VideoSelectCover";
export default {
name: "NutritionalVideo",
data() {
@ -316,6 +331,8 @@
coverImageList:[],
//分类列表
classifyList:[],
//所有分类
allClassifyList:[],
//权限等级列表
payVideoLevelList:[],
//视频分类弹窗显示标识
@ -331,7 +348,7 @@
});
},
components: {
UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect
UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect,VideoSelectCover
},
methods: {
/** 查询营养视频列表 */
@ -350,6 +367,7 @@
getAllVideoClassify(){
getAllClassify().then(response => {
if(response.code == 200){
this.allClassifyList = response.data;
this.classifyList = [];
const classify = { id: 0, cateName: '主分类', children: [] };
classify.children = this.handleTree(response.data, "id");
@ -366,6 +384,7 @@
reset() {
this.form = {
id: null,
videoId:null,
cateId: null,
coverUrl: null,
title: null,
@ -373,10 +392,18 @@
tags: null,
payLevel:null,
showFlag: null,
wxShow: false
wxShow: false,
previewUrl: null
};
this.resetForm("form");
},
selectVideoCover(){
this.$refs.videoSelectCoverRef.showDialog(this.form,(url)=>{
//console.log(url);
this.form.previewUrl = url;
this.form.coverUrl = url;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@ -394,7 +421,7 @@
this.multiple = !selection.length
},
clickUploadVideo(){
this.$refs.uploadVideoRef.showDialog(this.classifyList, ()=>{
this.$refs.uploadVideoRef.showDialog(this.allClassifyList, ()=>{
this.getList();
});
},
@ -443,6 +470,14 @@
this.$refs["form"].validate(valid => {
if (valid) {
this.form.showFlag = this.form.wxShow ? 1 : 0;
//视频分类不能选择主分类
if(this.form.cateId == 0){
this.$message({
message: "视频分类不能选择主分类",
type: "warning",
});
return;
}
if (this.form.id != null) {
updateNutritionalVideo(this.form).then(response => {
if (response.code === 200) {