技術標籤：uploadvueelementuijs

效果圖

完整子元件程式碼

<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">
            <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" :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:''
        }
    },
    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
            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.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;
    }
    .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>