Commit 9d815ae5 authored by Your Name's avatar Your Name

缩略图不显示

parent 8a16c63b
/** /**
* Created by supervisor on 2017/11/3. * Created by supervisor on 2017/11/3.
*/ */
import axios from 'axios' import axios from 'axios'
import { Message, MessageBox, Loading } from 'element-ui'; import { Message, MessageBox, Loading } from 'element-ui';
import router from '../router' import router from '../router'
import { baseUrl } from './env' import { baseUrl } from './env'
import MyLocalStorage from './myLocalStorage' import MyLocalStorage from './myLocalStorage'
import { loginOut } from './loginOut' import { loginOut } from './loginOut'
//axios 拦截器 请求时的拦截 //axios 拦截器 请求时的拦截
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
// 发送请求之前做一些处理 // 发送请求之前做一些处理
// config.headers = { // config.headers = {
// 'Content-Type': 'application/json' // 'Content-Type': 'application/json'
// }; // };
return config return config
}, error => { }, error => {
// 当请求异常时做一些处理 // 当请求异常时做一些处理
return new Promise.reject(error) return new Promise.reject(error)
}) })
// 响应时拦截 // 响应时拦截
axios.interceptors.response.use(response => { axios.interceptors.response.use(response => {
// 返回响应时做一些处理 // 返回响应时做一些处理
return response return response
}, error => { }, error => {
// 当响应异常时做一些处理 // 当响应异常时做一些处理
return Promise.resolve(error.response) return Promise.resolve(error.response)
}) })
function errorState(status, data) { function errorState(status, data) {
if (data.resultCode == '1109') { if (data.resultCode == '1109') {
loginOut() loginOut()
MessageBox.alert('您的登录过期,请重新登录!', '提示', { MessageBox.alert('您的登录过期,请重新登录!', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: () => { callback: () => {
router.push({ path: '/', query: { redirect: router.history.current.fullPath } }) router.push({ path: '/', query: { redirect: router.history.current.fullPath } })
} }
}); });
} else if (status === 401) { } else if (status === 401) {
MessageBox.alert('您的用户权限已被禁用,请联系管理员!', '提示', { MessageBox.alert('您的用户权限已被禁用,请联系管理员!', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: () => { callback: () => {
//这个时候点击确定后清除用户信息 //这个时候点击确定后清除用户信息
localStorage.removeItem('backToken') localStorage.removeItem('backToken')
localStorage.removeItem('userId') localStorage.removeItem('userId')
router.push({ path: '/', query: { redirect: router.history.current.fullPath } }) router.push({ path: '/', query: { redirect: router.history.current.fullPath } })
} }
}); });
} else if (status === 500 && data.message.indexOf("not have permission") !== -1) { } else if (status === 500 && data.message.indexOf("not have permission") !== -1) {
Message.error("抱歉,你无权访问该页面!") Message.error("抱歉,你无权访问该页面!")
} else if (!data) { } else if (!data) {
Message.error("网络出小差咯~") Message.error("网络出小差咯~")
} }
} }
function successState(res) { function successState(res) {
} }
const httpServer = (opts, data, file, timeout) => { const httpServer = (opts, data, file, timeout) => {
//如果是不需要登录就可以访问的接口 需要设置opts.open //如果是不需要登录就可以访问的接口 需要设置opts.open
let Public = {} //公共参数 let Public = {} //公共参数
let httpDefaultOpts = { let httpDefaultOpts = {
method: opts.method, method: opts.method,
url: baseUrl + opts.url, url: baseUrl + opts.url,
timeout: timeout ? timeout : 10800000, timeout: timeout ? timeout : 10800000,
params: Object.assign(Public, data), params: Object.assign(Public, data),
data: data, data: data,
headers: opts.headers || {}, headers: opts.headers || {},
responseType: opts.responseType || '' responseType: opts.responseType || ''
}; };
httpDefaultOpts.headers["Access-control-Allow-Origin"] = "*"; httpDefaultOpts.headers["Access-control-Allow-Origin"] = "*";
httpDefaultOpts.headers["Access-Control-Allow-Headers"] = "content-type,x-requested-with"; httpDefaultOpts.headers["Access-Control-Allow-Headers"] = "content-type,x-requested-with";
let authToken = ""; let authToken = "";
if (opts.authType && opts.authType != "") { if (opts.authType && opts.authType != "") {
// Authorization // Authorization
if (opts.authType === "back") { if (opts.authType === "back") {
authToken = localStorage.getItem('backToken'); authToken = localStorage.getItem('backToken');
} else if (opts.authType === "front") { } else if (opts.authType === "front") {
authToken = localStorage.getItem("token") || MyLocalStorage.Cache.get('token'); authToken = localStorage.getItem("token") || MyLocalStorage.Cache.get('token');
} }
httpDefaultOpts.headers["Authorization"] = authToken httpDefaultOpts.headers["Authorization"] = authToken
} }
if (opts.method === 'get') { if (opts.method === 'get') {
delete httpDefaultOpts.data delete httpDefaultOpts.data
httpDefaultOpts.params.timestamp_static = new Date().getTime(); httpDefaultOpts.params.timestamp_static = new Date().getTime();
} else { } else {
delete httpDefaultOpts.params delete httpDefaultOpts.params
if (file) { if (file) {
httpDefaultOpts.data = data; httpDefaultOpts.data = data;
} }
} }
let promise = new Promise(function (resolve, reject) { let promise = new Promise(function (resolve, reject) {
let loadingInstance = Loading.service({ let loadingInstance = Loading.service({
fullscreen: true, fullscreen: true,
lock: true, lock: true,
background: 'rgba(0,0,0,.5)', background: 'rgba(0,0,0,.5)',
text: 'Loading', text: 'Loading',
spinner: 'el-icon-loading' spinner: 'el-icon-loading'
}) })
// let markIndex = setTimeout(function () { // let markIndex = setTimeout(function () {
// loadingInstance.close(); // loadingInstance.close();
// }, 10000) // }, 10000)
axios(httpDefaultOpts).then((res) => { axios(httpDefaultOpts).then((res) => {
// console.log(res) // console.log(res)
if (res.data) { if (res.data) {
loadingInstance.close(); loadingInstance.close();
// clearTimeout(markIndex) // clearTimeout(markIndex)
} }
if (res.data.resultCode == '1109' && localStorage.getItem('backToken')) { if (res.data.resultCode == '1109' && localStorage.getItem('backToken')) {
//清除用户信息 //清除用户信息
errorState(res.status, res.data) errorState(res.status, res.data)
} else { } else {
successState(res) successState(res)
resolve(res) resolve(res)
} }
}).catch((response) => { }).catch((response) => {
loadingInstance.close(); loadingInstance.close();
clearTimeout(markIndex) clearTimeout(markIndex)
console.log("catch") console.log("catch")
if (response && response.response && response.response.status && response.response.data) { if (response && response.response && response.response.status && response.response.data) {
errorState(response.response.status, response.response.data) errorState(response.response.status, response.response.data)
} }
reject(response) reject(response)
if (response.response.data) { if (response.response.data) {
if (response.response.data.message) { if (response.response.data.message) {
Message.error(response.response.data.message) Message.error(response.response.data.message)
} else { } else {
Message.error("操作失败!") Message.error("操作失败!")
} }
} }
}) })
}) })
return promise return promise
} }
export default httpServer export default httpServer
<template> <template>
<div> <div>
<!-- {{fileList}} --> <!-- {{fileList}} -->
<el-upload <el-upload
ref="upload" ref="upload"
accept=".mp3,.aac,.wma,.rm,.flac,.ogg," accept=".mp3,.aac,.wma,.rm,.flac,.ogg,"
:multiple="true" :multiple="true"
:http-request="uploadFile" :http-request="uploadFile"
:file-list="fileList" :file-list="fileList"
action action
:auto-upload="false" :auto-upload="false"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
:on-remove="handleRemove" :on-remove="handleRemove"
> >
<i class="el-icon-plus fileUpload"></i> <i class="el-icon-plus fileUpload"></i>
</el-upload> </el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button> <el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props:{ props:{
fileList:{ fileList:{
type:Array, type:Array,
default:[] default:[]
}, },
}, },
data() { data() {
return { return {
fullscreenLoading: false, fullscreenLoading: false,
loading:false, loading:false,
filedata: [], filedata: [],
fileArr: [], fileArr: [],
}; };
}, },
mounted(){ mounted(){
// console.log("uploadAudio",this.fileList) // console.log("uploadAudio",this.fileList)
}, },
methods: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
// console.log(fileList,fileList.map(item=>item.id),'1111') // console.log(fileList,fileList.map(item=>item.id),'1111')
// return this.$confirm(`确定移除 ${ file.name }?`); // return this.$confirm(`确定移除 ${ file.name }?`);
this.$emit('audioList',fileList.map(item=>item.id)) this.$emit('audioList',fileList.map(item=>item.id))
}, },
submitUpload() { submitUpload() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '上传中,请稍候。。。', text: '上传中,请稍候。。。',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
// this.loading = true // this.loading = true
this.filedata = new FormData() // 用FormData存放上传文件 this.filedata = new FormData() // 用FormData存放上传文件
this.$refs.upload.submit() // 会循环调用uploadFile方法,多个文件调用多次 this.$refs.upload.submit() // 会循环调用uploadFile方法,多个文件调用多次
let _this = this; let _this = this;
_this _this
.$https( .$https(
{ {
method: "post", method: "post",
url: "file/audio/upload", url: "file/audio/upload",
authType: this.backToken authType: this.backToken
}, },
this.filedata this.filedata
) )
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
console.log(res) // console.log(res)
loading.close(); loading.close();
// this.loading = false // this.loading = false
if (resData.resultCode == "200") { if (resData.resultCode == "200") {
_this.$message.success('上传成功!') _this.$message.success('上传成功!')
const data = resData.data.fileList const data = resData.data.fileList
let newArray = data.map((item) => item.id) let newArray = data.map((item) => item.id)
let editArray =[] let editArray =[]
if(this.fileList.length){ if(this.fileList.length){
editArray = this.fileList.map(item=>item.id) editArray = this.fileList.map(item=>item.id)
} }
this.$emit('audioList', [...newArray,...editArray]) this.$emit('audioList', [...newArray,...editArray])
} else { } else {
_this.$message.error(resData.msg || resData.message); _this.$message.error(resData.msg || resData.message);
} }
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
_this.$message.error(err.msg || err.message); _this.$message.error(err.msg || err.message);
}); });
}, },
uploadFile(file) { uploadFile(file) {
this.filedata.append('file', file.file) this.filedata.append('file', file.file)
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 / 1024 < 1; const isLt5M = file.size / 1024 / 1024 / 1024 < 1;
if (!isLt5M) { if (!isLt5M) {
this.$message.error("上传文件大小不能超过 1GB!"); this.$message.error("上传文件大小不能超过 1GB!");
} }
return isLt5M; return isLt5M;
// var testmsg = file.name.substring(file.name.lastIndexOf('.')+1) // var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
// const extension = (testmsg === 'mp3')||(testmsg === 'aac')||(testmsg === 'wma')||(testmsg === 'rm')||(testmsg === 'flac')||(testmsg === 'ogg') // const extension = (testmsg === 'mp3')||(testmsg === 'aac')||(testmsg === 'wma')||(testmsg === 'rm')||(testmsg === 'flac')||(testmsg === 'ogg')
// if(!extension){ // if(!extension){
// this.$message({ // this.$message({
// message:"上传文件只能是mp3,aac,wma,rm,flac,ogg,格式!", // message:"上传文件只能是mp3,aac,wma,rm,flac,ogg,格式!",
// type:'error' // type:'error'
// }) // })
// } // }
// return extension; // return extension;
} }
} }
}; };
</script> </script>
<style> <style>
.el-upload .fileUpload { .el-upload .fileUpload {
width: 148px; width: 148px;
height: 148px; height: 148px;
line-height: 148px!important; line-height: 148px!important;
margin: 0 auto; margin: 0 auto;
border: 1px dashed #c0ccda; border: 1px dashed #c0ccda;
font-size: 24px; font-size: 24px;
font: #ccc; font: #ccc;
} }
</style> </style>
<template> <template>
<div> <div>
<el-upload <el-upload
ref="upload" ref="upload"
accept=".mp4,.flv,.mpeg,.mpg,.mov" accept=".mp4,.flv,.mpeg,.mpg,.mov"
:multiple="true" :multiple="true"
:http-request="uploadFile" :http-request="uploadFile"
:file-list="fileList" :file-list="fileList"
action action
:auto-upload="false" :auto-upload="false"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
> >
<i class="el-icon-plus fileUpload"></i> <i class="el-icon-plus fileUpload"></i>
</el-upload> </el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button> <el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props:{ props:{
fileList:{ fileList:{
type:Array, type:Array,
default:[] default:[]
}, },
}, },
data() { data() {
return { return {
fullscreenLoading: false, fullscreenLoading: false,
loading:false, loading:false,
filedata:[], filedata:[],
fileArr: [], fileArr: [],
fileList:[], fileList:[],
// fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
}; };
}, },
methods: { methods: {
openFullScreen2() { openFullScreen2() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '上传中,请稍候。。。', text: '上传中,请稍候。。。',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
}, },
submitUpload() { // 导入 submitUpload() { // 导入
// this.openFullScreen2() // this.openFullScreen2()
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '上传中,请稍候。。。', text: '上传中,请稍候。。。',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
// this.loading = true // this.loading = true
let tempData = this.filedata let tempData = this.filedata
this.filedata = new FormData() // 用FormData存放上传文件 this.filedata = new FormData() // 用FormData存放上传文件
this.$refs.upload.submit() // 会循环调用uploadFile方法,多个文件调用多次 this.$refs.upload.submit() // 会循环调用uploadFile方法,多个文件调用多次
let _this = this; let _this = this;
_this _this
.$https( .$https(
{ {
method: "post", method: "post",
url: "file/video/content/upload", url: "file/video/content/upload",
authType: this.backToken authType: this.backToken
}, },
this.filedata this.filedata
) )
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
console.log(res) // console.log(res)
loading.close(); loading.close();
// this.loading = false // this.loading = false
if (resData.resultCode == "200") { if (resData.resultCode == "200") {
_this.$message.success('上传成功!') _this.$message.success('上传成功!')
const data = resData.data.fileList; const data = resData.data.fileList;
let newArray = data.map((item) => item.id); let newArray = data.map((item) => item.id);
let editArray =[] let editArray =[]
if(this.fileList.length){ if(this.fileList.length){
editArray = this.fileList.map(item=>item.id) editArray = this.fileList.map(item=>item.id)
} }
this.$emit("videoList", [...newArray,...editArray]); this.$emit("videoList", [...newArray,...editArray]);
} else { } else {
_this.$message.error(resData.msg || resData.message); _this.$message.error(resData.msg || resData.message);
} }
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
_this.$message.error(err.msg || err.message); _this.$message.error(err.msg || err.message);
}); });
}, },
uploadFile(file) { uploadFile(file) {
console.log(file) // console.log(file)
this.filedata.append('file', file.file) this.filedata.append('file', file.file)
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isLt10G = file.size / 1024 / 1024 / 1024 < 10; const isLt10G = file.size / 1024 / 1024 / 1024 < 10;
if (!isLt10G) { if (!isLt10G) {
this.$message.error("上传文件大小不能超过 10GB!"); this.$message.error("上传文件大小不能超过 10GB!");
} }
return isLt10G; return isLt10G;
} }
} }
}; };
</script> </script>
<style> <style>
.el-upload .fileUpload { .el-upload .fileUpload {
width: 148px; width: 148px;
height: 148px; height: 148px;
line-height: 148px!important; line-height: 148px!important;
margin: 0 auto; margin: 0 auto;
border: 1px dashed #c0ccda; border: 1px dashed #c0ccda;
font-size: 24px; font-size: 24px;
font: #ccc; font: #ccc;
} }
</style> </style>
<template> <template>
<el-form enctype="multipart/form-data"> <el-form enctype="multipart/form-data">
选择多文件: 选择多文件:
<input type="file" name="files" multiple="multiple" @change="getFiles($event)" /> <input type="file" name="files" multiple="multiple" @change="getFiles($event)" />
<br />选择文件夹: <br />选择文件夹:
<input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory /> <input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory />
<br /> <br />
<ul class="el-upload-list el-upload-list--text"> <ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-ready" v-for="(item, i) in files" :label="item.name" :value="item.name" :key="i"> <li class="el-upload-list__item is-ready" v-for="(item, i) in files" :label="item.name" :value="item.name" :key="i">
{{item.name}} {{item.name}}
<span> <span>
<el-button size="mini" type="text"> <el-button size="mini" type="text">
<i @click="remove(item)" class="el-icon-close"></i> <i @click="remove(item)" class="el-icon-close"></i>
</el-button> </el-button>
</span> </span>
</li> </li>
</ul> </ul>
<el-button size="medium" type="success" @click.stop="upload">上传到服务器</el-button> <el-button size="medium" type="success" @click.stop="upload">上传到服务器</el-button>
</el-form> </el-form>
</template> </template>
<script> <script>
import axios from "axios"; import axios from "axios";
export default { export default {
name: "UploadFileVue", name: "UploadFileVue",
props:{ props:{
fileList:{ fileList:{
type:Array, type:Array,
default:[] default:() => []
}, },
}, },
data() { data() {
return { return {
fullscreenLoading: false, fullscreenLoading: false,
files: [ files: [
] ]
}; };
}, },
watch: { watch: {
fileList(newName, oldName) { fileList(newName, oldName) {
console.log(newName) // console.log(newName)
this.files = newName this.files = newName
// ... // ...
} }
}, },
computed: { computed: {
headers() { headers() {
return { return {
Authorization: localStorage.getItem("backToken") || "" Authorization: localStorage.getItem("backToken") || ""
}; };
} }
}, },
methods: { methods: {
remove(data) { remove(data) {
const children = this.files; const children = this.files;
const index = children.findIndex(d => d.name === data.name); const index = children.findIndex(d => d.name === data.name);
children.splice(index, 1); children.splice(index, 1);
console.log(this.files,'111') // console.log(this.files,'111')
this.$emit("videoList", this.files.map(item=>item.id)); this.$emit("videoList", this.files.map(item=>item.id));
}, },
getFiles: function(event) { getFiles: function(event) {
console.log(event); // console.log(event);
var files = event.target.files; var files = event.target.files;
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
this.files.push(files[i]); this.files.push(files[i]);
} }
console.log(this.files, "--"); // console.log(this.files, "--");
}, },
upload: function() { upload: function() {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '上传中,请稍候。。。', text: '上传中,请稍候。。。',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
console.log(this.files); // console.log(this.files);
var formData = new FormData(); var formData = new FormData();
for (var i = 0; i < this.files.length; i++) { for (var i = 0; i < this.files.length; i++) {
formData.append("file", this.files[i]); formData.append("file", this.files[i]);
} }
console.log(formData); // console.log(formData);
let _this = this; let _this = this;
_this _this
.$https( .$https(
{ {
method: "post", method: "post",
url: "file/video/content/upload", url: "file/video/content/upload",
authType: this.backToken authType: this.backToken
}, },
formData formData
) )
.then(res => { .then(res => {
loading.close(); loading.close();
let resData = res.data; let resData = res.data;
console.log(res); // console.log(res);
if (resData.resultCode == "200") { if (resData.resultCode == "200") {
_this.$message.success("上传成功!"); _this.$message.success("上传成功!");
const data = resData.data.fileList; const data = resData.data.fileList;
let newArray = data.map((item) => item.id); let newArray = data.map((item) => item.id);
let editArray =[] let editArray =[]
if(this.files.length){ if(this.files.length){
editArray = this.files.map(item=>item.id) editArray = this.files.map(item=>item.id)
} }
this.$emit("videoList", [...newArray,...editArray]); this.$emit("videoList", [...newArray,...editArray]);
} else { } else {
_this.$message.error(resData.msg || resData.message); _this.$message.error(resData.msg || resData.message);
} }
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
_this.$message.error(err.msg || err.message); _this.$message.error(err.msg || err.message);
}); });
} }
} }
}; };
</script> </script>
<style> <style>
</style> </style>
\ No newline at end of file
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
:on-remove="handleRemove" :on-remove="handleRemove"
:on-success="handleAvatarSuccess" :on-success="handleAvatarSuccess"
:headers="headers" :headers="headers"
:file-list="fileList" :file-list="fileShowList"
:limit="1" :limit="1"
:multiple ="false" :multiple ="false"
> >
...@@ -24,19 +24,24 @@ ...@@ -24,19 +24,24 @@
<script> <script>
export default { export default {
// props:{ props:{
// fileList:{ fileList:{
// type: Array, type: Array,
// default: () => [], default: () => [],
// }, },
// }, },
data() { data() {
return { return {
fileList: [], fileShowList: [],
dialogImageUrl: "", dialogImageUrl: "",
dialogVisible: false, dialogVisible: false,
imageUrl:"", imageUrl:"",
}; };
},
watch: {
fileList(val) {
this.fileShowList = val;
}
}, },
computed: { computed: {
headers() { headers() {
...@@ -45,7 +50,7 @@ export default { ...@@ -45,7 +50,7 @@ export default {
}; };
}, },
uploadDisabled:function() { uploadDisabled:function() {
return (this.fileList.length>0)||this.imageUrl return (this.fileShowList.length>0)||this.imageUrl
}, },
}, },
methods: { methods: {
...@@ -61,7 +66,7 @@ export default { ...@@ -61,7 +66,7 @@ export default {
handleRemove(file, fileList) { handleRemove(file, fileList) {
this.$emit("imgUrl", ""); this.$emit("imgUrl", "");
this.imageUrl="" this.imageUrl=""
this.fileList=[] this.fileShowList=[]
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.dialogImageUrl = file.url; this.dialogImageUrl = file.url;
...@@ -72,7 +77,7 @@ export default { ...@@ -72,7 +77,7 @@ export default {
name: "", name: "",
url: cover, url: cover,
}; };
this.fileList = [file] this.fileShowList = [file]
}, },
}, },
}; };
......
...@@ -67,7 +67,7 @@ export default { ...@@ -67,7 +67,7 @@ export default {
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); // console.log(file, fileList);
this.$emit("qrcodeUrl", ""); this.$emit("qrcodeUrl", "");
this.imageUrl="" this.imageUrl=""
this.fileList=[] this.fileList=[]
......
<template> <template>
<div class="info"> <div class="info">
<div class="info-header">{{ type === 'Update'?'修改':'新建'}}视频</div> <div class="info-header">{{ type === 'Update'?'修改':'新建'}}视频</div>
<div class="info-container"> <div class="info-container">
<div class="info-wrapper"> <div class="info-wrapper">
<div class="pageTips"> <div class="pageTips">
<strong>页面说明:</strong> <strong>页面说明:</strong>
可新建视频。“*”为必填项。若没有对应的视频版权方或视频分类可点击图标快速新建。 可新建视频。“*”为必填项。若没有对应的视频版权方或视频分类可点击图标快速新建。
</div> </div>
<el-form <el-form
:model="ruleForm" :model="ruleForm"
:rules="rules" :rules="rules"
ref="ruleForm" ref="ruleForm"
label-width="140px" label-width="140px"
class="demo-form-inline party-form" class="demo-form-inline party-form"
:inline="true" :inline="true"
label-position="top" label-position="top"
> >
<el-form-item label="视频名称" prop="name" class="w100"> <el-form-item label="视频名称" prop="name" class="w100">
<el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input> <el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="请选择视频版权方" prop="videoContentCopyrightOwnerId"> <el-form-item label="请选择视频版权方" prop="videoContentCopyrightOwnerId">
<el-select <el-select
placeholder="请选择视频版权方" placeholder="请选择视频版权方"
@focus="getVideoContentCopyrightData" @focus="getVideoContentCopyrightData"
v-model="ruleForm.videoContentCopyrightOwnerId" v-model="ruleForm.videoContentCopyrightOwnerId"
> >
<el-option <el-option
v-for="item in copyrightOwner" v-for="item in copyrightOwner"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
:key="item.id" :key="item.id"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<add-copyright ref="addCopyright"></add-copyright> <add-copyright ref="addCopyright"></add-copyright>
<!-- <el-form-item class="addTip"> <!-- <el-form-item class="addTip">
<add-copyright ref="addCopyright"></add-copyright> <add-copyright ref="addCopyright"></add-copyright>
<span>若没有相应的视频版权方,请点击</span> <span>若没有相应的视频版权方,请点击</span>
<el-button type="text" @click="addVideoCopyright">新建视频版权方</el-button> <el-button type="text" @click="addVideoCopyright">新建视频版权方</el-button>
</el-form-item> --> </el-form-item> -->
<el-form-item > <el-form-item >
<br> <br>
<span style="color:red">若没有相应的视频版权方,请点击</span> <span style="color:red">若没有相应的视频版权方,请点击</span>
<el-button type="text" @click="addVideoCopyright">新建视频版权方</el-button> <el-button type="text" @click="addVideoCopyright">新建视频版权方</el-button>
</el-form-item> </el-form-item>
<el-form-item label="请选择视频分类" > <el-form-item label="请选择视频分类" >
<el-select <el-select
placeholder="请选择预设视频分类" placeholder="请选择预设视频分类"
@focus="getVideoContentCatData" @focus="getVideoContentCatData"
v-model="ruleForm.videoContentCatId" v-model="ruleForm.videoContentCatId"
> >
<el-option <el-option
v-for="item in videoContentCat" v-for="item in videoContentCat"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
:key="item.id" :key="item.id"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item > <el-form-item >
<br> <br>
<span style="color:red">若没有相应的视频分类,请点击</span> <span style="color:red">若没有相应的视频分类,请点击</span>
<el-button type="text" @click="addVideoClass">新建视频分类</el-button> <el-button type="text" @click="addVideoClass">新建视频分类</el-button>
</el-form-item> </el-form-item>
<!-- <el-form-item class="addTip"> <!-- <el-form-item class="addTip">
<span>若没有相应的视频分类,请点击</span> <span>若没有相应的视频分类,请点击</span>
<el-button type="text" @click="addVideoClass">新建视频分类</el-button> <el-button type="text" @click="addVideoClass">新建视频分类</el-button>
</el-form-item> --> </el-form-item> -->
<el-form-item label="视频缩略图" required> <el-form-item label="视频缩略图" required>
<upload-img :fileList="ruleForm.imageList" @imgUrl="imgUrl"></upload-img> <upload-img :fileList="ruleForm.imageList" @imgUrl="imgUrl"></upload-img>
</el-form-item> </el-form-item>
<!-- <el-form-item label="上传视频" required> <!-- <el-form-item label="上传视频" required>
<p style="color:red">(支持上传多个视频及视频文件夹,视频语言支持汉语、蒙语、藏语、维吾尔语、英语,视频命名规定:视频名称+语言)</p> <p style="color:red">(支持上传多个视频及视频文件夹,视频语言支持汉语、蒙语、藏语、维吾尔语、英语,视频命名规定:视频名称+语言)</p>
<upload-file :fileList="ruleForm.videoList" @videoList="videoList"></upload-file> <upload-file :fileList="ruleForm.videoList" @videoList="videoList"></upload-file>
</el-form-item> --> </el-form-item> -->
<el-form-item label="上传视频" required > <el-form-item label="上传视频" required >
<div style="color:red;"> <div style="color:red;">
(支持上传多个视频及视频文件夹,视频语言支持汉语、蒙语、藏语、维吾尔语、英语,视频命名规定:视频名称+语言) (支持上传多个视频及视频文件夹,视频语言支持汉语、蒙语、藏语、维吾尔语、英语,视频命名规定:视频名称+语言)
</div> </div>
<upload-folder :fileList="ruleForm.videoList" @videoList="videoList" ></upload-folder> <upload-folder :fileList="ruleForm.videoList" @videoList="videoList" ></upload-folder>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!--新增弹框--> <!--新增弹框-->
<el-dialog <el-dialog
custom-class="party-dialog" custom-class="party-dialog"
title="新建视频分类" title="新建视频分类"
width="468px" width="468px"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:before-close="close" :before-close="close"
> >
<div class="dialog-content"> <div class="dialog-content">
<el-form <el-form
:model="classForm" :model="classForm"
ref="classForm" ref="classForm"
label-width="80px" label-width="80px"
label-position="top" label-position="top"
:rules="rule" :rules="rule"
id="ruleo" id="ruleo"
class="party-form" class="party-form"
> >
<el-form-item label="视频分类名称" prop="name"> <el-form-item label="视频分类名称" prop="name">
<el-input oninput="value = value.trim()" v-model="classForm.name"></el-input> <el-input oninput="value = value.trim()" v-model="classForm.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注" class="w100" prop="remarks"> <el-form-item label="备注" class="w100" prop="remarks">
<el-input type="textarea" v-model="classForm.remarks"></el-input> <el-input type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer btn-group"> <div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" type="primary" @click="save('classForm')">确定</el-button> <el-button size="mini" type="primary" @click="save('classForm')">确定</el-button>
<el-button size="mini" @click="close">取 消</el-button> <el-button size="mini" @click="close">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
<div class="info-footer"> <div class="info-footer">
<div class="btn-group"> <div class="btn-group">
<div class="btn-group"> <div class="btn-group">
<el-button <el-button
type="primary" type="primary"
v-show="type === 'add'" v-show="type === 'add'"
class="btn_form_search" class="btn_form_search"
@click="submitForm('ruleForm')" @click="submitForm('ruleForm')"
>提交审核</el-button> >提交审核</el-button>
<el-button <el-button
type="primary" type="primary"
v-show="type === 'Update'" v-show="type === 'Update'"
class="btn_form_search" class="btn_form_search"
@click="updateForm('ruleForm')" @click="updateForm('ruleForm')"
>提交审核</el-button> >提交审核</el-button>
<el-button @click="resetForm('ruleForm')">取消</el-button> <el-button @click="resetForm('ruleForm')">取消</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import uploadImg from '@/page/content/components/uploadVue/uploadImg' import uploadImg from '@/page/content/components/uploadVue/uploadImg'
import uploadFile from '@/page/content/components/uploadVue/uploadFile' import uploadFile from '@/page/content/components/uploadVue/uploadFile'
import uploadDatum from '@/page/content/components/uploadVue/uploadDatum' import uploadDatum from '@/page/content/components/uploadVue/uploadDatum'
import mulDisplay from '@/page/content/components/mulClassify/mulDisplay' import mulDisplay from '@/page/content/components/mulClassify/mulDisplay'
import addCopyright from '@/page/content/components/dialog/addCopyright' import addCopyright from '@/page/content/components/dialog/addCopyright'
import uploadFolder from "@/page/content/components/uploadVue/uploadFolder"; import uploadFolder from "@/page/content/components/uploadVue/uploadFolder";
export default { export default {
components:{ components:{
uploadImg, uploadImg,
uploadFile, uploadFile,
uploadDatum, uploadDatum,
mulDisplay, mulDisplay,
addCopyright, addCopyright,
uploadFolder uploadFolder
}, },
data() { data() {
return { return {
copyrightOwner:[], copyrightOwner:[],
type: this.$route.query.type, type: this.$route.query.type,
dialogVisible: false, dialogVisible: false,
formLabelWidth: "100px", formLabelWidth: "100px",
form: { form: {
name: "" name: ""
}, },
classForm: {}, classForm: {},
value1: [], value1: [],
ruleForm: { ruleForm: {
name: "", name: "",
videoContentCopyrightOwnerId:"", videoContentCopyrightOwnerId:"",
videoContentCatIdList: "", videoContentCatIdList: "",
videoContentCatId: "", videoContentCatId: "",
thumbnail:"", thumbnail:"",
videoFileIdList:[] imageList: [],
}, videoFileIdList:[]
videoContentCat: [], },
videoContentCat: [],
checkedThing: false,
selfstyle: { checkedThing: false,
textAlign: "right", selfstyle: {
width: "100%", textAlign: "right",
paddingRight: "10px" width: "100%",
}, paddingRight: "10px"
rule:{ },
name: [ rule:{
// { required: true, message: "请输入视频分类名称", trigger: "blur" }, name: [
{ min: 1, max: 20, message: "请输入1到20个字" }, // { required: true, message: "请输入视频分类名称", trigger: "blur" },
], { min: 1, max: 20, message: "请输入1到20个字" },
remarks: [ ],
{ min: 1, max: 100, message: "请输入1到100个字" }, remarks: [
], { min: 1, max: 100, message: "请输入1到100个字" },
}, ],
rules: { },
name: [ rules: {
{ required: true, message: "请输入视频名称", trigger: "blur" }, name: [
{ min: 1, max: 20, message: "请输入1到20个字" }, { required: true, message: "请输入视频名称", trigger: "blur" },
], { min: 1, max: 20, message: "请输入1到20个字" },
videoContentCopyrightOwnerId:[ ],
{ required: true, message: "请选择视频版权方", trigger: "change" } videoContentCopyrightOwnerId:[
], { required: true, message: "请选择视频版权方", trigger: "change" }
videoContentCatIdList:[ ],
{ required: true, message: "请选择视频分类", trigger: "change" } videoContentCatIdList:[
], { required: true, message: "请选择视频分类", trigger: "change" }
thumbnail:[ ],
{ required: true, message: "请上传视频缩略图", trigger: "change" } thumbnail:[
], { required: true, message: "请上传视频缩略图", trigger: "change" }
videoUrlList:[ ],
{ required: true, message: "请上传视频", trigger: "change" } videoUrlList:[
], { required: true, message: "请上传视频", trigger: "change" }
],
}
}; }
}, };
mounted() { },
this.init(); mounted() {
this.getVideoContentCopyrightData() this.init();
}, this.getVideoContentCopyrightData()
methods: { },
// 视频版权方名称id methods: {
videoCopyright(idlist){ // 视频版权方名称id
this.ruleForm.videoContentCopyrightOwnerId = idlist videoCopyright(idlist){
}, this.ruleForm.videoContentCopyrightOwnerId = idlist
// 缩略图地址 },
imgUrl(url){ // 缩略图地址
console.log(url,'图片服务器地址') imgUrl(url){
this.ruleForm.thumbnail = url // console.log(url,'图片服务器地址')
}, this.ruleForm.thumbnail = url
// 视频列表地址 },
videoList(list){ // 视频列表地址
this.ruleForm.videoFileIdList = list videoList(list){
}, this.ruleForm.videoFileIdList = list
init() { },
if (this.$route.query.type === "Update") { init() {
this.getInfo(this.$route.query.id); if (this.$route.query.type === "Update") {
this.getInfo(this.$route.query.id);
}
}, }
getVideoContentCat(data){ },
console.log(data) getVideoContentCat(data){
console.log(this.ruleForm.videoContentCatId) // console.log(data)
}, // console.log(this.ruleForm.videoContentCatId)
// 获取信息 },
getInfo(id) { // 获取信息
let vm = this; getInfo(id) {
vm.$https( let vm = this;
{ vm.$https(
url: "videoContent/get/" + id, {
method: "get", url: "videoContent/get/" + id,
authType: this.backToken method: "get",
} authType: this.backToken
// param }
).then(res => { // param
let data = res.data.data; ).then(res => {
// this.ruleForm = data; let data = res.data.data;
this.ruleForm.id = data.id // this.ruleForm = data;
this.ruleForm.name = data.name this.ruleForm.id = data.id
this.ruleForm.videoContentCopyrightOwnerId = data.videoContentCopyrightOwnerId this.ruleForm.name = data.name
this.ruleForm.videoContentCatId = data.videoContentCatId this.ruleForm.videoContentCopyrightOwnerId = data.videoContentCopyrightOwnerId
this.ruleForm.thumbnail = data.thumbnail this.ruleForm.videoContentCatId = data.videoContentCatId
this.ruleForm.videoFileIdList = data.videoFileIdList this.ruleForm.thumbnail = data.thumbnail
this.ruleForm.imageList=[{url:data.thumbnail}] this.ruleForm.videoFileIdList = data.videoFileIdList
this.ruleForm.videoList=data.videoFileList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}}) this.ruleForm.imageList=[{url:data.thumbnail}]
this.getVideoContentCatData() this.ruleForm.videoList=data.videoFileList.map(item=>{return {id:item.id,name:item.fileName,url:item.fileUrl}})
this.getVideoContentCopyrightData() this.getVideoContentCatData()
}).catch(function(err) { this.getVideoContentCopyrightData()
console.log(err); }).catch(function(err) {
}); console.log(err);
}, });
// 新建展板分类 },
addVideoCopyright(){ // 新建展板分类
this.$refs.addCopyright.dialogVisible = true addVideoCopyright(){
}, this.$refs.addCopyright.dialogVisible = true
// 新建视频分类 },
addVideoClass() { // 新建视频分类
this.dialogVisible = true; addVideoClass() {
}, this.dialogVisible = true;
// 新建视频分类弹窗保存 },
save(formName) { // 新建视频分类弹窗保存
this.$refs[formName].validate(valid => { save(formName) {
this.ruleForm.expireDateEnd = this.value1[1]; this.$refs[formName].validate(valid => {
this.ruleForm.expireDateStart = this.value1[0]; this.ruleForm.expireDateEnd = this.value1[1];
if (valid) { this.ruleForm.expireDateStart = this.value1[0];
this.$https( if (valid) {
{ this.$https(
url: "videoContentCat/save", {
method: "post", url: "videoContentCat/save",
authType: this.backToken method: "post",
}, authType: this.backToken
this.$qs.stringify(this.classForm) },
).then(res => { this.$qs.stringify(this.classForm)
if(res.data.resultCode === "200"){ ).then(res => {
this.$message({ type: "success", message: "新增分类成功!" }); if(res.data.resultCode === "200"){
this.dialogVisible = false; this.$message({ type: "success", message: "新增分类成功!" });
}else{ this.dialogVisible = false;
this.$message({ type: "error", message: res.data.message }); }else{
} this.$message({ type: "error", message: res.data.message });
}).catch(function(err) { }
this.$message({ }).catch(function(err) {
type: "fail", this.$message({
message: "新增失败!" + err.response.data.msg type: "fail",
}); message: "新增失败!" + err.response.data.msg
}); });
} else { });
console.log("error submit!!"); } else {
return false; console.log("error submit!!");
} return false;
}); }
}, });
// 新增关闭 },
close() { // 新增关闭
this.dialogVisible = false; close() {
for (let key in this.classForm) { this.dialogVisible = false;
this.classForm[key] = null; for (let key in this.classForm) {
} this.classForm[key] = null;
this.$refs["classForm"].resetFields(); }
}, this.$refs["classForm"].resetFields();
// 新增 },
submitForm(formName) { // 新增
this.$refs[formName].validate(valid => { submitForm(formName) {
if (valid) { this.$refs[formName].validate(valid => {
this.$https( if (valid) {
{ this.$https(
url: "videoContent/save", {
method: "post", url: "videoContent/save",
authType: this.backToken method: "post",
}, authType: this.backToken
this.$qs.stringify(this.ruleForm) },
).then(res => { this.$qs.stringify(this.ruleForm)
if(res.data.resultCode === "200"){ ).then(res => {
this.$message({ type: "success", message: "新增视频申请已提交,待审核!" }); if(res.data.resultCode === "200"){
history.go(-1); this.$message({ type: "success", message: "新增视频申请已提交,待审核!" });
}else{ history.go(-1);
this.$message({ type: "error", message: res.data.message }); }else{
} this.$message({ type: "error", message: res.data.message });
}
}).catch(function(err) {
console.log(err); }).catch(function(err) {
}); console.log(err);
} else { });
console.log("error submit!!"); } else {
return false; console.log("error submit!!");
} return false;
}); }
}, });
// 修改版权方 },
updateForm(formName) { // 修改版权方
this.$refs[formName].validate(valid => { updateForm(formName) {
if (valid) { this.$refs[formName].validate(valid => {
this.$https( if (valid) {
{ this.$https(
url: "videoContent/update", {
method: "put", url: "videoContent/update",
authType: this.backToken method: "put",
}, authType: this.backToken
this.$qs.stringify(this.ruleForm) },
).then(res => { this.$qs.stringify(this.ruleForm)
if(res.data.resultCode === "200"){ ).then(res => {
this.$message({ type: "success", message: "修改视频申请已提交,待审核!" }); if(res.data.resultCode === "200"){
history.go(-1); this.$message({ type: "success", message: "修改视频申请已提交,待审核!" });
}else{ history.go(-1);
this.$message({ type: "error", message: res.data.message }); }else{
} this.$message({ type: "error", message: res.data.message });
}).catch(function(err) { }
console.log(err); }).catch(function(err) {
}); console.log(err);
} else { });
console.log("error submit!!"); } else {
return false; console.log("error submit!!");
} return false;
}); }
}, });
resetForm(formName) { },
this.$refs[formName].resetFields(); resetForm(formName) {
history.go(-1); this.$refs[formName].resetFields();
}, history.go(-1);
getVideoContentCopyrightData() { },
let vm = this; getVideoContentCopyrightData() {
vm.$https({ let vm = this;
url: "copyrightOwner/getList", vm.$https({
method: "get", url: "copyrightOwner/getList",
authType: this.backToken method: "get",
}, authType: this.backToken
{copyrightOwnerType:'VIDEO_CONTENT'}) },
.then(res => { {copyrightOwnerType:'VIDEO_CONTENT'})
let data = res.data.data; .then(res => {
this.copyrightOwner = data; let data = res.data.data;
}) this.copyrightOwner = data;
.catch(function(err) { })
console.log(err); .catch(function(err) {
}); console.log(err);
}, });
// 获取视频分类列表 },
getVideoContentCatData() { // 获取视频分类列表
let vm = this; getVideoContentCatData() {
if(this.ruleForm.videoContentCopyrightOwnerId){ let vm = this;
vm.$https({ if(this.ruleForm.videoContentCopyrightOwnerId){
url: "videoContentCat/getList", vm.$https({
method: "get", url: "videoContentCat/getList",
authType: this.backToken method: "get",
},{copyrightOwnerId:this.ruleForm.videoContentCopyrightOwnerId}).then(res => { authType: this.backToken
this.videoContentCat = res.data.data; },{copyrightOwnerId:this.ruleForm.videoContentCopyrightOwnerId}).then(res => {
}).catch(function(err) { this.videoContentCat = res.data.data;
console.log(err); }).catch(function(err) {
}); console.log(err);
}else{ });
this.$message.warning("请先选择视频版权方!") }else{
} this.$message.warning("请先选择视频版权方!")
}
},
getSelectDep(videoContentCatIdList) { },
this.checkedThing = videoContentCatIdList.length === this.videoContentCat.length; getSelectDep(videoContentCatIdList) {
}, this.checkedThing = videoContentCatIdList.length === this.videoContentCat.length;
selectAllThing() { },
// debugger selectAllThing() {
this.ruleForm.videoContentCatIdList = []; // debugger
if (this.checkedThing) { this.ruleForm.videoContentCatIdList = [];
this.videoContentCat.map(item => { if (this.checkedThing) {
this.ruleForm.videoContentCatIdList.push(item.id); this.videoContentCat.map(item => {
}); this.ruleForm.videoContentCatIdList.push(item.id);
} else { });
this.ruleForm.videoContentCatIdList = []; } else {
} this.ruleForm.videoContentCatIdList = [];
} }
} }
}; }
</script> };
</script>
<style lang="less">
@import "../../../../style/dialog"; <style lang="less">
</style> @import "../../../../style/dialog";
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment