<template>
|
<div>
|
<Card>
|
<Form
|
ref="searchForm"
|
@keydown.enter.native="handleSearch"
|
:model="searchForm"
|
inline
|
:label-width="70"
|
class="search-form"
|
>
|
<Form-item label="标题" prop="title">
|
<Input
|
type="text"
|
v-model="searchForm.title"
|
clearable
|
@on-clear="handleSearch"
|
@on-change="handleSearch"
|
style="width: 160px"
|
/>
|
</Form-item>
|
<!-- todo 暂时隐藏大健康一期没定义标签-->
|
<Form-item v-if="false" label="标签" prop="tagList">
|
<Select
|
v-model="searchForm.tagList"
|
clearable
|
filterable
|
multiple
|
@on-clear="handleSearch"
|
@on-change="handleSearch"
|
style="width: 160px"
|
>
|
<Option v-for="tag in tagList" :key="tag.id" :value="tag.id">{{ tag.tagName }}</Option>
|
</Select>
|
</Form-item>
|
<Form-item label="视频状态" prop="status">
|
<Select
|
v-model="searchForm.status"
|
clearable
|
@on-clear="handleSearch"
|
@on-change="handleSearch"
|
style="width: 160px"
|
>
|
<Option value="99">待审核</Option>
|
<Option value="1">已发布</Option>
|
<Option value="0">已下架</Option>
|
<Option value="-1">审核未通过</Option>
|
</Select>
|
</Form-item>
|
<Button
|
@click="handleSearch"
|
type="primary"
|
icon="ios-search"
|
class="search-btn"
|
>搜索
|
</Button
|
>
|
<Button
|
@click="handleVideoUpLoad"
|
type="primary"
|
icon="md-arrow-up"
|
class="search-btn"
|
>上传视频
|
</Button
|
>
|
</Form>
|
<!-- 大健康视频上传-->
|
<Modal
|
v-model="upLoadVideoShow"
|
:title="uploadVideoForm.id?'编辑大健康视频':'上传大健康视频'"
|
width="800"
|
:mask-closable="false"
|
>
|
|
<Form
|
:model="uploadVideoForm"
|
ref="uploadVideoForm"
|
:rules="uploadVideoFileRule"
|
>
|
<Row :gutter="24">
|
<Col span="24">
|
<Spin size="large" fix v-if="upLoadVideoLoading"> 文件上传中...</Spin>
|
</Col>
|
<Col span="12">
|
<FormItem label="标题" prop="title">
|
<Input placeholder="请输入标题" v-model="uploadVideoForm.title"
|
style="width: 200px"
|
/>
|
</FormItem>
|
</Col>
|
<Col span="24">
|
<FormItem label="刷新dom使用" prop="title" v-show="false">
|
<Input placeholder="请输入标题" v-model="uploadVideoForm.temp"
|
style="width: 200px"
|
/>
|
</FormItem>
|
</Col>
|
<Col span="12" v-if="!uploadVideoForm.videoFileKey">
|
<FormItem label="上传视频" prop="videoFileKey">
|
<Upload
|
:multiple="true"
|
:before-upload="upLoadVideo"
|
accept="video/*"
|
action=""
|
>
|
<Button icon="ios-cloud-upload-outline">选择视频</Button>
|
</Upload>
|
</FormItem>
|
</Col>
|
|
<Col span="24" v-else>
|
<FormItem label="视频">
|
<video style="width: 150px;height: 150px"
|
controls
|
@loadedmetadata="getVideoDuration"
|
:poster="uploadVideoForm.showCoverUrl"
|
:autoplay="false"
|
id="remoteVideo" :src="uploadVideoForm.showVideoUrl"
|
ref="healthVideoInfo"
|
></video>
|
</FormItem>
|
</Col>
|
|
<Col span="12" v-show="uploadVideoForm.videoFileKey && !uploadVideoForm.coverUrl">
|
<FormItem label="上传封面" prop="coverUrl">
|
<Upload
|
:multiple="true"
|
:before-upload="upLoadImg"
|
accept="image/*"
|
action=""
|
>
|
<Button icon="ios-cloud-upload-outline">选择封面</Button>
|
</Upload>
|
</FormItem>
|
</Col>
|
<Col span="24">
|
<div>
|
<Button type="primary" @click="clearCoverImage" v-show="uploadVideoForm.coverUrl">重新上传封面</Button>
|
<Button type="primary" @click="clearVideo" style="margin-left: 20px"
|
v-show="uploadVideoForm.videoFileKey">重新上传视频
|
</Button>
|
</div>
|
</Col>
|
<!-- <Col span="24" v-else>-->
|
<!-- <FormItem label="封面">-->
|
<!-- <div class="showCoverImg" style="width: 150px;height: 150px;">-->
|
<!-- <img :src="uploadVideoForm.showCoverUrl" style="width: 150px;height: 150px" class="coverImg"/>-->
|
<!-- <Icon type="ios-close" size="24" class="coverImgRemove" color="red"-->
|
<!-- style="border-radius: 50%;background: #fff;cursor: pointer"-->
|
<!-- @click="removeCover"-->
|
<!-- />-->
|
<!-- </div>-->
|
<!-- </FormItem>-->
|
<!-- </Col>-->
|
</Row>
|
|
</Form>
|
<div slot="footer">
|
<Button type="text" @click="closeHealthVideo">关闭</Button>
|
<Button type="primary" @click="submitHealthVideo">确认</Button>
|
</div>
|
</Modal>
|
<Modal
|
v-model="playVideoShow"
|
:title="playVideoTitle"
|
width="800"
|
:mask-closable="false"
|
>
|
<div class="video-warp">
|
<video :src="playVideoUrl" autoplay controls style="width: 768px;height: 432px"/>
|
</div>
|
<div slot="footer">
|
<Button type="text" @click="playVideoClose">关闭</Button>
|
</div>
|
</Modal>
|
|
<Modal
|
v-model="auditingShow"
|
title="视频审核"
|
width="800"
|
:loading="auditingLoading"
|
:mask-closable="false"
|
>
|
|
<Form
|
ref="auditingForm"
|
:model="auditingForm"
|
:label-width="70"
|
:rules="auditingRule"
|
>
|
<Form-item label="标题：">
|
<div>{{ detail.title }}</div>
|
</Form-item>
|
<Form-item label="标签：">
|
<div style="display: flex;flex-wrap: wrap">
|
<div v-for="(tag, index) in detail.tagList" :key="'tag' + index" style="margin-right: 5px">
|
<Tag color="red">{{ tag.tagName }}</Tag>
|
</div>
|
</div>
|
</Form-item>
|
<Form-item label="视频时长：" :label-width="72">
|
<div>{{ formatSeconds(detail.videoDuration) }}</div>
|
</Form-item>
|
<Form-item class="video-warp" :label-width="0">
|
<video :src="detail.videoUrl" autoplay controls style="width: 768px;height: 432px"/>
|
</Form-item>
|
<Form-item label="审核结果：" :label-width="100" prop="result">
|
<RadioGroup v-model="auditingForm.result">
|
<Radio :label="1">通过</Radio>
|
<Radio :label="0">不通过</Radio>
|
</RadioGroup>
|
</Form-item>
|
<Form-item v-show="auditingForm.result === 0" label="不通过原因：" :label-width="100" prop="reason">
|
<Input
|
type="textarea"
|
v-model="auditingForm.reason"
|
clearable
|
style="width: 100%"
|
/>
|
</Form-item>
|
</Form>
|
<div slot="footer">
|
<Button type="text" @click="closeAuditing">关闭</Button>
|
<Button type="primary" @click="submitAuditing">确认</Button>
|
</div>
|
</Modal>
|
|
<Modal
|
v-model="videoDownShow"
|
title="视频下架"
|
width="800"
|
:mask-closable="false"
|
>
|
<Form :model="videoDownForm" :rules="videoDownRule" ref="videoDownForm">
|
<FormItem label="下架原因：" :labelWidth="100" prop="reason">
|
<editor ref="editor" @input="getReason"/>
|
</FormItem>
|
</Form>
|
<div slot="footer">
|
<Button type="text" @click="closeVideoDown">关闭</Button>
|
<Button type="primary" @click="videoDown">确认</Button>
|
</div>
|
</Modal>
|
|
<Table
|
:loading="loading"
|
border
|
:columns="columns"
|
:data="data"
|
ref="table"
|
sortable="custom"
|
@on-sort-change="changeSort"
|
@on-selection-change="showSelect"
|
>
|
<template slot-scope="{ row, index }" slot="tagList">
|
<div v-for="(tag, index) in row.tagList" :key="'tag' + index" style="margin-top: 5px">
|
<Tag color="red">{{ tag.tagName }}</Tag>
|
</div>
|
</template>
|
<template slot-scope="{ row, index }" slot="videoFileKey">
|
<div class="play-text" @click="playVideo(row.videoFileKey, row.title)">点击播放</div>
|
</template>
|
<template slot-scope="{ row, index }" slot="videoDuration">
|
<div>{{ formatSeconds(row.videoDuration) }}</div>
|
</template>
|
<template slot-scope="{ row, index }" slot="recommend">
|
<i-switch v-model="row.recommend" :before-change="() => handleBeforeChange(row)" true-color="#13ce66"/>
|
</template>
|
<template slot-scope="{ row, index }" slot="status">
|
{{ transStatus(row.status) }}
|
</template>
|
<template slot-scope="{ row, index }" slot="action">
|
<Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'"
|
@click="openAuditing(row)">审核
|
</Button>
|
<Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'"
|
@click="openVideoDown(row)">下架
|
</Button>
|
<Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'"
|
@click="videoUp(row)">上架
|
</Button>
|
<Button type="success" size="small" style="margin-right: 5px"
|
@click="handleVideoUpLoad(row)">编辑
|
</Button>
|
<Button type="success" size="small" style="margin-right: 5px"
|
@click="deleteHealthVideo(row)">删除
|
</Button>
|
</template>
|
</Table>
|
|
<Row type="flex" justify="end" class="mt_10">
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="changePage"
|
@on-page-size-change="changePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
</Card>
|
</div>
|
</template>
|
|
<script>
|
import {recommendSet, getVideoById, auditingVideo, up, down} from "@/api/video";
|
import {healthVideo, getHealthVideos, updateHealthVideo,delHealth} from "@/api/health-video";
|
import {getVideoTagList} from "@/api/videoTag";
|
import {getFilePreview, getSts} from "@/api/file";
|
import Editor from '@/components/editor/index.vue'
|
import COS from 'cos-js-sdk-v5';
|
import {getFileKey} from "@/utils/file.js";
|
|
export default {
|
name: "VideoList",
|
components: {Editor},
|
data() {
|
return {
|
videoDownForm: {
|
id: '',
|
reason: ''
|
},
|
videoDownRule: {
|
reason: [
|
{
|
require: true,
|
message: '请输入下架原因',
|
trigger: 'blur',
|
validator: (rule, value, callback) => {
|
if (value === null || value === '') {
|
callback(new Error('请输入下架原因'));
|
} else {
|
callback();
|
}
|
}
|
}
|
]
|
},
|
videoDownShow: false, // 视频下架
|
videoDownMsg: '', // 下架提示信息
|
auditingForm: { // 审核表单
|
id: null,
|
result: null,
|
reason: ''
|
},
|
auditingRule: {
|
result: [
|
{
|
required: true,
|
message: '请选择视频审核结果',
|
trigger: 'change',
|
validator: (rule, value, callback) => {
|
if (value === null || value === undefined) {
|
callback(new Error('请选择视频审核结果'));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
},
|
uploadVideoFileRule: {
|
coverUrl: [
|
{
|
required: true,
|
message: '请上传封面',
|
trigger: 'blur',
|
validator: (rule, value, callback) => {
|
if (value === null || value === undefined) {
|
callback(new Error('请上传封面'));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
title: [
|
{
|
required: true,
|
message: '请输入标题',
|
trigger: 'blur',
|
validator: (rule, value, callback) => {
|
console.log('验证值:-------------->', value, '类型:', typeof value);
|
if (value === null || value === undefined) {
|
callback(new Error('请输入标题'));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
},
|
detail: {}, // 视频详情信息
|
auditingShow: false, // 审核弹窗
|
upLoadVideoShow: false,//文件上传弹窗
|
auditingLoading: false, // 审核弹窗
|
upLoadVideoLoading: false,//上传视频
|
playVideoShow: false, // 视频播放弹窗
|
playVideoTitle: '', // 视频播放标题
|
playVideoUrl: '', // 当前正在播放的视频地址
|
modelShow: false, // 弹窗显隐
|
modelTitle: '', // 弹窗title
|
loading: false, // 表单加载状态
|
searchForm: {
|
// 搜索框初始化对象
|
pageNumber: 1, // 当前页数
|
pageSize: 10, // 页面大小
|
title: '', // 标题
|
tagList: [], // 标签
|
status: '99'
|
},
|
tagList: [], // 标签列表
|
columns: [
|
{
|
type: 'selection',
|
width: 60,
|
align: 'center'
|
},
|
{
|
title: "标题",
|
key: "title",
|
minWidth: 240,
|
tooltip: true,
|
},
|
// {
|
// title: "作者",
|
// key: "authorName",
|
// width: 130,
|
// tooltip: true,
|
// },
|
// {
|
// title: "视频标签",
|
// key: "tagList",
|
// width: 180,
|
// slot: "tagList",
|
// },
|
{
|
title: "视频内容",
|
key: "videoFileKey",
|
width: 170,
|
slot: "videoFileKey"
|
},
|
{
|
title: "时长",
|
key: "videoDuration",
|
width: 80,
|
align: 'center',
|
slot: "videoDuration",
|
},
|
{
|
title: "播放量",
|
key: "playNum",
|
width: 80,
|
align: 'center'
|
},
|
{
|
title: "收藏数",
|
key: "collectNum",
|
width: 80,
|
align: 'center'
|
},
|
{
|
title: "评论数",
|
key: "commentNum",
|
width: 80,
|
align: 'center'
|
},
|
{
|
title: "首页推荐",
|
key: "recommend",
|
slot: "recommend",
|
width: 100,
|
align: 'center'
|
},
|
{
|
title: "权重",
|
key: "weight",
|
width: 170,
|
},
|
{
|
title: "状态",
|
key: "status",
|
slot: "status",
|
width: 120,
|
align: 'center'
|
},
|
{
|
title: "操作",
|
key: "action",
|
slot: "action",
|
align: "center",
|
width: 200,
|
},
|
],
|
data: [], // 表单数据
|
total: 0, // 表单数据总数
|
selectCount: 0, // 已选数量
|
selectList: [], // 已选数据列表
|
uploadVideoForm: {
|
id: null,
|
coverUrl: null,
|
videoFileKey: null,
|
videoFit: null,
|
videoDuration: null,
|
title: null,
|
videoContentType: null,
|
videoType: null,
|
showCoverUrl: null,
|
showVideoUrl: null,
|
temp: null
|
|
},
|
}
|
},
|
created() {
|
this.getDataList();
|
this.getTags('')
|
},
|
methods: {
|
// 秒转x分x秒
|
formatSeconds(seconds) {
|
if (isNaN(seconds) || seconds < 0) return '0秒';
|
|
const mins = Math.floor(seconds / 60);
|
const secs = seconds % 60;
|
|
if (mins === 0) return `${secs}秒`;
|
if (secs === 0) return `${mins}分`;
|
|
return `${mins}分${secs}秒`;
|
},
|
// 获取标签列表
|
getTags(tagName) {
|
let params = {
|
'tagName': tagName
|
}
|
getVideoTagList(params).then(res => {
|
this.tagList = res.data
|
})
|
},
|
// 获取富文本编辑器的内容
|
getReason(content) {
|
this.videoDownForm.reason = content
|
},
|
//重新上传封面
|
clearCoverImage() {
|
this.$set(this.uploadVideoForm, 'coverUrl', '');
|
this.$set(this.uploadVideoForm, 'showCoverUrl', '');
|
this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
|
},
|
//重新上传视频
|
clearVideo() {
|
this.clearCoverImage();
|
this.$set(this.uploadVideoForm, 'videoFileKey', '');
|
this.$set(this.uploadVideoForm, 'showVideoUrl', '');
|
this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
|
console.log(this.uploadVideoForm)
|
},
|
// 视频上架
|
videoUp(row) {
|
this.$Modal.confirm({
|
title: "操作确认",
|
content: "您确认要上架视频【 " + row.title + "】吗?",
|
loading: true,
|
onOk: () => {
|
up(row.id).then(res => {
|
this.$Modal.remove();
|
if (res.code == 200) {
|
this.$Message.success("视频上架成功");
|
this.getDataList();
|
}
|
});
|
}
|
});
|
},
|
// 视频下架
|
videoDown() {
|
this.$refs.videoDownForm.validate((valid) => {
|
if (valid) {
|
down(this.videoDownForm).then(res => {
|
this.$Message.success("下架成功")
|
this.closeVideoDown()
|
this.getDataList()
|
})
|
}
|
})
|
},
|
// 关闭视频下架
|
closeVideoDown() {
|
this.videoDownShow = false
|
this.videoDownForm = {
|
id: '',
|
reason: ''
|
}
|
this.$refs.editor.setContent('')
|
},
|
// 视频下架
|
openVideoDown(row) {
|
this.videoDownForm.id = row.id
|
this.videoDownShow = true
|
},
|
// 视频发布/修改
|
submitHealthVideo() {
|
try {
|
this.upLoadVideoLoading = true
|
this.$refs.uploadVideoForm.validate((valid) => {
|
if (valid) {
|
// 修改
|
if (this.uploadVideoForm.id) {
|
updateHealthVideo(this.uploadVideoForm).then(res => {
|
this.$Message.success("修改完成")
|
this.closeHealthVideo()
|
this.getDataList()
|
})
|
} else {
|
healthVideo(this.uploadVideoForm).then(res => {
|
this.$Message.success("添加完成")
|
this.closeHealthVideo()
|
this.getDataList()
|
})
|
}
|
}
|
})
|
} finally {
|
this.upLoadVideoLoading = false
|
}
|
},
|
// 关闭窗口
|
closeHealthVideo() {
|
//
|
this.uploadVideoForm = {};
|
this.upLoadVideoShow = false;
|
},
|
// 提交审核结果
|
submitAuditing() {
|
console.log(this.auditingForm, "sb")
|
this.$refs.auditingForm.validate((valid) => {
|
if (valid) {
|
auditingVideo(this.auditingForm).then(res => {
|
this.$Message.success("审核完成")
|
this.closeAuditing()
|
this.getDataList()
|
})
|
}
|
})
|
},
|
// 审核结果变化
|
resultChange(selected) {
|
this.auditingForm.result = selected === '通过' ? 1 : 0
|
console.log(this.auditingForm.result)
|
},
|
closeAuditing() {
|
this.auditingForm = {
|
id: null,
|
result: null,
|
reason: ''
|
}
|
this.detail = {}
|
this.auditingShow = false
|
},
|
// 打开审核弹窗
|
openAuditing(row) {
|
this.auditingShow = true
|
this.auditingLoading = true
|
this.auditingForm.id = row.id
|
getVideoById(row.id).then(res => {
|
this.detail = res.data
|
this.auditingLoading = false
|
})
|
},
|
getVideoDuration(e){
|
const duration = this.$refs.healthVideoInfo.duration;
|
this.uploadVideoForm.videoDuration = Math.floor(duration);
|
},
|
// 打开编辑弹窗
|
deleteHealthVideo(row) {
|
console.log('删除测试', row)
|
this.$Modal.confirm({
|
title: "操作确认",
|
content: "您确认要删除视频【 " + row.title + "】吗?",
|
loading: true,
|
onOk: () => {
|
delHealth(row.id).then(res => {
|
this.$Modal.remove();
|
if (res.code === 200) {
|
this.$Message.success("视频删除成功");
|
this.getDataList();
|
}
|
});
|
}
|
});
|
},
|
// 翻译状态
|
transStatus(status) {
|
switch (status) {
|
case '99':
|
return '待审核'
|
case '1':
|
return '已发布'
|
case '0':
|
return '已下架'
|
case '-1':
|
return '审核未通过'
|
default:
|
return '未知'
|
}
|
},
|
// 开启或关闭推荐的方法
|
handleBeforeChange(row) {
|
let content = ""
|
if (row.recommend) {
|
content = '确认要关闭首页推荐吗？'
|
} else {
|
content = '确认要开启首页推荐吗？'
|
}
|
return new Promise((resolve) => {
|
this.$Modal.confirm({
|
title: '操作提醒',
|
content: content,
|
onOk: () => {
|
recommendSet({id: row.id, recommend: !row.recommend}).then(res => {
|
this.$Message.success(res.msg);
|
resolve();
|
})
|
}
|
});
|
});
|
},
|
// 关闭视频播放
|
playVideoClose() {
|
this.playVideoTitle = '';
|
this.playVideoUrl = '';
|
this.playVideoShow = false
|
},
|
// 点击播放视频
|
playVideo(fileKey, title) {
|
this.playVideoTitle = title;
|
|
getFilePreview(fileKey).then(res => {
|
this.playVideoUrl = res.data
|
this.playVideoShow = true
|
})
|
},
|
// 搜索
|
handleSearch() {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
this.getDataList();
|
},
|
// 获取列表数据
|
getDataList() {
|
this.loading = true;
|
getHealthVideos(this.searchForm).then((res) => {
|
console.log(res)
|
this.loading = false;
|
if (res.code === 200) {
|
this.data = res.data;
|
this.total = res.total;
|
}
|
});
|
this.total = this.data.length;
|
this.loading = false;
|
},
|
showSelect(e) {
|
this.selectList = e.map(d => d.id);
|
this.selectCount = e.length;
|
},
|
// 排序
|
changeSort(e) {
|
this.searchForm.sort = e.key;
|
this.searchForm.order = e.order;
|
if (e.order == "normal") {
|
this.searchForm.order = "";
|
}
|
this.getDataList();
|
},
|
// 分页 改变页码
|
changePage(v) {
|
this.searchForm.pageNumber = v;
|
this.getDataList();
|
},
|
// 分页 改变页数
|
changePageSize(v) {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = v;
|
this.getDataList();
|
},
|
handleVideoUpLoad(row) {
|
this.uploadVideoForm = {};
|
this.upLoadVideoShow = true;
|
if (row.id) {
|
this.uploadVideoForm.id = row.id;
|
this.uploadVideoForm.showVideoUrl = row.videoUrl
|
this.uploadVideoForm.videoFileKey = row.videoFileKey;
|
this.uploadVideoForm.coverUrl = row.coverUrl;
|
this.uploadVideoForm.showCoverUrl = row.coverShowUrl;
|
this.uploadVideoForm.title = row.title;
|
}
|
},
|
async upLoadVideo(file) {
|
try {
|
this.$nextTick(() => {
|
this.upLoadVideoLoading = true;
|
})
|
// 获取文件上传临时密钥
|
const sts = await getSts();
|
const cos = new COS({
|
getAuthorization: async function (options, callback) {
|
callback({
|
TmpSecretId: sts.data.tmpSecretId,
|
TmpSecretKey: sts.data.tmpSecretKey,
|
SecurityToken: sts.data.sessionToken,
|
// 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
|
StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
|
ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
|
ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
|
});
|
}
|
})
|
const fileKey = getFileKey(file.name)
|
const upData = await cos.uploadFile({
|
Bucket: sts.data.bucket,
|
Region: sts.data.region,
|
Key: fileKey,
|
Body: file, // 要上传的文件对象。
|
SliceSize: 1024 * 1024 * 5,
|
onProgress: function (progressData) {
|
console.log('上传进度：', progressData);
|
},
|
});
|
|
console.log(this.uploadVideoForm)
|
this.$nextTick(() => {
|
this.uploadVideoForm.videoFileKey = fileKey;
|
this.uploadVideoForm.showVideoUrl = sts.data.endpoint + "/" + fileKey;
|
})
|
console.log("上传成功", upData)
|
const duration = this.$refs.healthVideoInfo.duration;
|
console.log('-测试获取时间信息---------------->', duration);
|
} catch (e) {
|
console.log("上传失败", upData)
|
} finally {
|
this.$nextTick(() => {
|
this.upLoadVideoLoading = false;
|
})
|
}
|
return false;
|
},
|
async upLoadImg(file) {
|
try {
|
this.upLoadVideoLoading = true;
|
// 获取文件上传临时密钥
|
const sts = await getSts();
|
const cos = new COS({
|
getAuthorization: async function (options, callback) {
|
callback({
|
TmpSecretId: sts.data.tmpSecretId,
|
TmpSecretKey: sts.data.tmpSecretKey,
|
SecurityToken: sts.data.sessionToken,
|
// 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
|
StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
|
ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
|
ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
|
});
|
}
|
})
|
const fileKey = getFileKey(file.name)
|
const upData = await cos.uploadFile({
|
Bucket: sts.data.bucket,
|
Region: sts.data.region,
|
Key: fileKey,
|
Body: file, // 要上传的文件对象。
|
SliceSize: 1024 * 1024 * 5,
|
onProgress: function (progressData) {
|
console.log('上传进度：', progressData);
|
},
|
});
|
console.log("上传成功", upData)
|
this.$nextTick(() => {
|
this.uploadVideoForm.coverUrl = fileKey;
|
this.uploadVideoForm.showCoverUrl = sts.data.endpoint + "/" + fileKey;
|
})
|
|
} catch (e) {
|
console.log("上传失败", upData)
|
} finally {
|
this.upLoadVideoLoading = false;
|
}
|
return false;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.play-text {
|
width: 100%;
|
text-align: center;
|
color: #2d8cf0;
|
}
|
|
.play-text:hover {
|
cursor: pointer;
|
}
|
|
.video-warp {
|
width: 786px;
|
height: 432px;
|
}
|
|
.data-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.showCoverImg {
|
position: relative;
|
}
|
|
.coverImgRemove {
|
position: absolute;
|
top: 15px;
|
right: -15px;
|
}
|
</style>
|
