upload video
This commit is contained in:
parent
27ba3d1d34
commit
3d0d5fd05e
|
|
@ -1,9 +1,10 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getArticleList() {
|
||||
export function getArticleList(query) {
|
||||
return request({
|
||||
url: '/cms/article/',
|
||||
method: 'get',
|
||||
params:query
|
||||
})
|
||||
}
|
||||
export function createArticle(data) {
|
||||
|
|
@ -39,10 +40,11 @@ export function topArticle(id) {
|
|||
})
|
||||
}
|
||||
|
||||
export function getMaterialList() {
|
||||
export function getMaterialList(query) {
|
||||
return request({
|
||||
url: '/cms/material/',
|
||||
method: 'get',
|
||||
params:query
|
||||
})
|
||||
}
|
||||
export function createMaterial(data) {
|
||||
|
|
|
|||
|
|
@ -1,54 +1,58 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="listQuery.search"
|
||||
placeholder="名称/描述"
|
||||
style="width: 300px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
<div>
|
||||
<el-input
|
||||
v-model="listQuery.search"
|
||||
placeholder="名称/描述"
|
||||
style="width: 300px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
style="margin-left: 10px;"
|
||||
type="primary"
|
||||
icon="el-icon-refresh-left"
|
||||
@click="resetFilter"
|
||||
>刷新重置</el-button>
|
||||
</div>
|
||||
<div style="margin-top:6px">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleCreate('文档')">文档</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleCreate('视频')">视频</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="materialList.results"
|
||||
style="width: 100%;margin-top:10px;"
|
||||
border
|
||||
fit
|
||||
stripe
|
||||
highlight-current-row
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="handleFilter"
|
||||
>搜索</el-button>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
style="margin-left: 10px;"
|
||||
type="primary"
|
||||
icon="el-icon-refresh-left"
|
||||
@click="resetFilter"
|
||||
>刷新重置</el-button>
|
||||
</div>
|
||||
<div style="margin-top:6px">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="materialList.results"
|
||||
style="width: 100%;margin-top:10px;"
|
||||
border
|
||||
fit
|
||||
stripe
|
||||
highlight-current-row
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-link type="primary" :href="scope.row.path" target="_blank" v-if="scope.row.path">{{ scope.row.name }}</el-link>
|
||||
<span v-else>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="header-center" label="上传时间">
|
||||
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="header-center" label="下载量">
|
||||
<template slot-scope="scope">{{ scope.row.down_count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
:href="scope.row.path"
|
||||
target="_blank"
|
||||
v-if="scope.row.path"
|
||||
>{{ scope.row.name }}</el-link>
|
||||
<span v-else>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="header-center" label="类型">
|
||||
<template slot-scope="scope">{{ scope.row.type }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="header-center" label="上传时间">
|
||||
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="header-center" label="下载量/播放量">
|
||||
<template slot-scope="scope">{{ scope.row.down_count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
|
|
@ -66,15 +70,19 @@
|
|||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="materialList.count>0"
|
||||
:total="materialList.count"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑':'新增'" :close-on-click-modal="false">
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="materialList.count>0"
|
||||
:total="materialList.count"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:title="dialogType==='update'?'编辑':'新增'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="Form"
|
||||
:model="material"
|
||||
|
|
@ -88,22 +96,64 @@
|
|||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="material.description" placeholder="描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文件" prop="path">
|
||||
<el-form-item label="封面" prop="poster" v-if="material.type=='视频'">
|
||||
<el-upload
|
||||
|
||||
:on-preview="handlePreview"
|
||||
:on-success="handleSuccess"
|
||||
:action="upUrl"
|
||||
:headers="upHeaders"
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-button size="small" type="primary" >点击上传</el-button>
|
||||
|
||||
</el-upload>
|
||||
accept=".png, .jpeg, .jpg"
|
||||
:before-upload="beforeUploadP"
|
||||
:action="upUrl"
|
||||
:headers="upHeaders"
|
||||
:on-success="handleSuccessP"
|
||||
:show-file-list="false"
|
||||
class="avatar-uploader"
|
||||
>
|
||||
<img v-if="material.poster" :src="material.poster" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item :label="material.type=='文档'?'文件':'视频'" prop="path">
|
||||
<el-upload
|
||||
v-if="material.type=='文档'"
|
||||
:on-preview="handlePreview"
|
||||
:on-success="handleSuccess"
|
||||
:action="upUrl"
|
||||
:headers="upHeaders"
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
accept=".pdf, .doc, .docx"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<el-upload
|
||||
v-else
|
||||
class="avatar-uploader"
|
||||
:action="upUrl"
|
||||
:headers="upHeaders"
|
||||
:show-file-list="false"
|
||||
:on-success="handleSuccessV"
|
||||
:before-upload="beforeUploadV"
|
||||
:on-progress="upVideoProgess"
|
||||
accept=".mp4, .m3u8"
|
||||
>
|
||||
<video
|
||||
v-if="material.path"
|
||||
:src="material.path"
|
||||
class="avatar"
|
||||
controls="controls"
|
||||
>您的浏览器不支持视频播放</video>
|
||||
<i
|
||||
v-else
|
||||
class="el-icon-plus avatar-uploader-icon"
|
||||
></i>
|
||||
<el-progress
|
||||
v-if="videoFlag == true"
|
||||
:percentage="upVideoPercent"
|
||||
style="margin-top:30px;"
|
||||
></el-progress>
|
||||
</el-upload>
|
||||
<div >请保证视频格式正确，且不超过100M</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div style="text-align:right;">
|
||||
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
|
||||
<el-button type="primary" @click="confirm('Form')">确认</el-button>
|
||||
|
|
@ -111,38 +161,71 @@
|
|||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getMaterialList, createMaterial, updateMaterial, deleteMaterial } from "@/api/cms"
|
||||
import { upUrl, upHeaders} from "@/api/file"
|
||||
import Pagination from "@/components/Pagination"
|
||||
import checkPermission from '@/utils/permission'
|
||||
const defaultmaterial = {
|
||||
id:null,
|
||||
name:null,
|
||||
description:null,
|
||||
path:null,
|
||||
type:'文档'
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import {
|
||||
getMaterialList,
|
||||
createMaterial,
|
||||
updateMaterial,
|
||||
deleteMaterial,
|
||||
} from "@/api/cms";
|
||||
import { upUrl, upHeaders } from "@/api/file";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import checkPermission from "@/utils/permission";
|
||||
const defaultmaterial = {
|
||||
id: null,
|
||||
name: null,
|
||||
description: null,
|
||||
path: null,
|
||||
poster: null,
|
||||
type: "文档",
|
||||
};
|
||||
export default {
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
upHeaders: upHeaders(),
|
||||
upUrl: upUrl(),
|
||||
materialList: {count:0},
|
||||
material:Object.assign({}, defaultmaterial),
|
||||
materialList: { count: 0 },
|
||||
material: Object.assign({}, defaultmaterial),
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
limit: 20,
|
||||
},
|
||||
dialogVisible:false,
|
||||
dialogType:'create',
|
||||
rule1:{
|
||||
dialogVisible: false,
|
||||
dialogType: "create",
|
||||
rule1: {
|
||||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
path: [{ required: true, message: "请上传文件", trigger: "blur" }]
|
||||
path: [{ required: true, message: "请上传文件", trigger: "blur" }],
|
||||
},
|
||||
fileList:[]
|
||||
fileList: [],
|
||||
videoFlag:false,
|
||||
upVideoPercent:0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -152,9 +235,9 @@ export default {
|
|||
checkPermission,
|
||||
getList() {
|
||||
this.listLoading = true;
|
||||
getMaterialList(this.listQuery).then(response => {
|
||||
getMaterialList(this.listQuery).then((response) => {
|
||||
if (response.data) {
|
||||
this.materialList = response.data
|
||||
this.materialList = response.data;
|
||||
}
|
||||
this.listLoading = false;
|
||||
});
|
||||
|
|
@ -162,7 +245,7 @@ export default {
|
|||
resetFilter() {
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
limit: 20,
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
|
|
@ -171,13 +254,14 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
handleDelete(scope) {
|
||||
deleteMaterial(scope.row.id).then(res=>{
|
||||
this.getList()
|
||||
})
|
||||
deleteMaterial(scope.row.id).then((res) => {
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
handleCreate() {
|
||||
handleCreate(val) {
|
||||
this.material = Object.assign({}, defaultmaterial);
|
||||
this.fileList = []
|
||||
this.material.type = val;
|
||||
this.fileList = [];
|
||||
this.dialogType = "create";
|
||||
this.dialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -185,63 +269,95 @@ export default {
|
|||
});
|
||||
},
|
||||
handleUpdate(scope) {
|
||||
this.material = Object.assign({}, scope.row) // copy obj
|
||||
if(this.material.path){
|
||||
this.fileList=[{
|
||||
name:this.material.name + '.' + this.material.path.split('.')[this.material.path.split('.').length - 1],
|
||||
url:this.material.path
|
||||
}]
|
||||
this.material = Object.assign({}, scope.row); // copy obj
|
||||
if (this.material.path) {
|
||||
this.fileList = [
|
||||
{
|
||||
name:
|
||||
this.material.name +
|
||||
"." +
|
||||
this.material.path.split(".")[
|
||||
this.material.path.split(".").length - 1
|
||||
],
|
||||
url: this.material.path,
|
||||
},
|
||||
];
|
||||
}
|
||||
this.dialogType = 'update'
|
||||
this.dialogVisible = true
|
||||
this.dialogType = "update";
|
||||
this.dialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['Form'].clearValidate()
|
||||
})
|
||||
this.$refs["Form"].clearValidate();
|
||||
});
|
||||
},
|
||||
handlePreview(file) {
|
||||
if ('url' in file){
|
||||
window.open(file.url)
|
||||
}else{
|
||||
window.open(file.response.data.path)
|
||||
if ("url" in file) {
|
||||
window.open(file.url);
|
||||
} else {
|
||||
window.open(file.response.data.path);
|
||||
}
|
||||
|
||||
},
|
||||
beforeUploadP(file) {
|
||||
const isLt1M = file.size / 1024 / 1024 < 1;
|
||||
if (!isLt1M) {
|
||||
this.$message.error("上传封面大小不能超过 1MB!");
|
||||
}
|
||||
return isLt1M;
|
||||
},
|
||||
beforeUploadV(file) {
|
||||
const isLt1M = file.size / 1024 / 1024 < 100;
|
||||
if (!isLt1M) {
|
||||
this.$message.error("上传视频大小不能超过 100MB!");
|
||||
}
|
||||
return isLt1M;
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.material.path = response.data.path
|
||||
this.material.path = response.data.path;
|
||||
},
|
||||
handleSuccessV(response, file, fileList) {
|
||||
this.videoFlag = false
|
||||
this.material.path = response.data.path;
|
||||
},
|
||||
handleSuccessP(response, file, fileList) {
|
||||
this.material.poster = response.data.path;
|
||||
},
|
||||
upVideoProgess(event, file, fileList){
|
||||
this.videoFlag = true;
|
||||
this.upVideoPercent = file.percentage.toFixed(0);
|
||||
},
|
||||
async confirm(form) {
|
||||
this.$refs[form].validate(valid => {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const isEdit = this.dialogType === "update";
|
||||
if (isEdit) {
|
||||
updateMaterial(this.material.id, this.material).then(res => {
|
||||
updateMaterial(this.material.id, this.material).then((res) => {
|
||||
if (res.code >= 200) {
|
||||
this.getList();
|
||||
this.dialogVisible = false
|
||||
this.dialogVisible = false;
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
duration: 2000
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createMaterial(this.material).then(res => {
|
||||
createMaterial(this.material)
|
||||
.then((res) => {
|
||||
this.getList();
|
||||
this.dialogVisible = false
|
||||
this.dialogVisible = false;
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
type: "success",
|
||||
})
|
||||
|
||||
}).catch(error=>{})
|
||||
});
|
||||
})
|
||||
.catch((error) => {});
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
status-icon
|
||||
>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="Form.title" style="width: 500"></el-input>
|
||||
<el-input v-model="Form.title" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源" prop="ifrom">
|
||||
<el-input v-model="Form.ifrom" style="width: 500"></el-input>
|
||||
<el-input v-model="Form.ifrom" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="外部链接" prop="elink" >
|
||||
<el-input v-model="Form.elink" style="width: 500"></el-input>
|
||||
<el-input v-model="Form.elink" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content" v-show="is_show">
|
||||
<tinymce v-model="Form.content" :height="400" :width="600"/>
|
||||
<tinymce v-model="Form.content" :height="400" width="80%"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">立即创建</el-button>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
status-icon
|
||||
>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="Form.title" style="width: 500"></el-input>
|
||||
<el-input v-model="Form.title" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源" prop="ifrom">
|
||||
<el-input v-model="Form.ifrom" style="width: 500"></el-input>
|
||||
<el-input v-model="Form.ifrom" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="外部链接" prop="elink" >
|
||||
<el-input v-model="Form.elink" style="width: 500"></el-input>
|
||||
<el-input v-model="Form.elink" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content" v-show="is_show">
|
||||
<tinymce v-model="Form.content" :height="400" :width="600"/>
|
||||
<tinymce v-model="Form.content" :height="400" width="80%"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">保存</el-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue