效果图
完整子组件代码
<template>
<div>
<el-upload
:action="action"
list-type="picture-card"
:on-success="handleSuccess"
:file-list="fileLists"
:on-progress="handleProgress"
:data="data"
accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb"
:headers="{username:username}"
:disabled="fileLists.length >= limit || uploadBtn">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<video class="el-upload-list__item-thumbnail" :src="file.url" alt=""></video>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handleShowVideo(file)">
<i class="el-icon-video-play"></i>
</span>
<span class="el-upload-list__item-edit" @click="handleEditVideo(file)">
<i class="el-icon-edit"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
<el-progress type="circle" class="progressModule" :color="colors" :percentage="Number(uploadPercentage)" v-if="showProgress && file.url == uploadUrl"></el-progress>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body width="40%" style="text-align:center">
<video :src="dialogImageUrl" alt="" autoplay class="video" controls="controls"></video>
</el-dialog>
<el-dialog :visible.sync="editView" width="40%" append-to-body>
<el-input type="textarea" :rows="4" v-model="editForm.url" @input="editVideo"></el-input>
</el-dialog>
</div>
</template>
<script>
export default {
props:{
limit:{
type:Number,
default:12,
},
action:{
type:String,
default:'#'
},
fileList:{
type:Array,
default: ()=>{
return []
}
},
data:{
type:Object,
default:() =>{
return {}
}
}
},
data(){
return{
dialogImageUrl: '',
dialogVisible: false,
fileLists:this.fileList,
editForm:{
url:'',
uid:null
},
editView:false,
username:'',
uploadPercentage:0,
showProgress:false,
uploadUrl:'',
colors: [
{color: '#ADD8E6', percentage: 20},
{color: '#87CEEB', percentage: 40},
{color: '#87CEFA', percentage: 60},
{color: '#00BFFF', percentage: 80},
{color: '#1296DB', percentage: 100}
],
uploadBtn:false,
}
},
mounted(){
this.username = Cookies.get('username')
},
methods:{
handleRemove(file) {
for(let i in this.fileLists){
if(this.fileLists[i].uid == file.uid){
this.fileLists.splice(i,1)
}
}
this.submitFile()
},
handleShowVideo(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleSuccess(response,file,fileList){
this.showProgress = false
this.uploadBtn = false
if(response.code != '200'){
for(var i =0;i<fileList.length;i++){
if(i+1 == fileList.length){
fileList.splice(i,1)
}
}
this.$message.error(response.sub_msg)
return
}else{
this.$message.success(response.sub_msg)
let obj = {
name: response.data.pictureName,
status: "success",
uid: file.uid,
url: response.data.url,
}
this.fileLists.push(obj)
this.submitFile()
}
},
handleEditVideo(file){
this.editForm.url = file.url
this.editForm.uid = file.uid
this.editView = true
},
editVideo(){
for(let i in this.fileLists){
if(this.fileLists[i].uid == this.editForm.uid){
this.fileLists[i].url = this.editForm.url
}
}
this.submitFile()
},
submitFile(){
this.$emit('submitImg',this.fileLists)
},
handleProgress(response,file,fileList){
this.uploadBtn = true
this.uploadUrl = file.url
this.showProgress = true
this.uploadPercentage = file.percentage.toFixed(0)
},
}
}
</script>
<style scoped>
.el-icon-plus{
font-size: 30px!important;
}
.el-icon-edit{
font-size: 18px !important;
}
.el-icon-video-play{
font-size: 18px !important;
}
.el-icon-delete{
font-size: 18px !important;
color:rgb(243, 143, 130);
}
.el-input>>> .el-textarea__inner{
font-size:18px!important;
}
.video{
min-height: 200px;
max-height: 600px;
min-width: 200px;
max-width: 100%;
}
.progressModule >>> .el-progress__text{
color:#1296DB;
font-size: 15px!important;
}
</style>