iview 上传功能

< template>

< div>

< div class= "desc">仅支持MP4格式H264编码的视频，且大小不要超过500M。视频格式转换方法</ div>

< Row>

< Col :span=" 12">

< div class= "demo-upload-list fl" v-for="(item,index) in uploadList" :key="index">

< template v-if="item.status === 'finished'">

< img :src="item.url"></ img>

< div class= "demo-upload-list-cover">

< Icon type= "close" @click.native=" Remove(item, index)" class= "del-btn"></ Icon>

</ div>

</ template>

< template v-else>

< i-circle v-if="item.showProgress" :percent="item.percentage" stroke-color= "#e63b24" :stroke-width=" 7">

< span class= "demo-Circle-inner" style= "font-size:24px">{{ parseInt(item.percentage) }}%</ span>

</ i-circle>

<!-- <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> -->

</ template>

</ div>

< Upload

ref= "upload"

:show-upload-list=" false"

:on-success="handleSuccess"

:format="[ 'mp4']"

:max-size=" 512000"

:on-format-error="handleFormatError"

:on-exceeded-size="handleMaxSize"

:before-upload="handleBeforeUpload"

:action="Upurl"

:data="{ 'uptoken': uptoken}"

style= "display: inline-block;width:195px;float:left;">

< div style= "width: 195px;height:130px;line-height: 130px;text-align:center;border:1px solid #dddee1;cursor:pointer;">

< Icon type= "plus" size= "40" color= "#dddee1"></ Icon>

</ div>

</ Upload>

</ Col>

</ Row>

</ div>

</ template>

< script>

export default {

name: 'tfUploadVideo',

props: {

editVideo: {

type: Array

}

},

data () {

return {

uploadList: [],

uptoken: '',

Upurl: this.$config.upload + 'mptup'

}

},

methods: {

Remove ( item, index) {

const fileList = this.$refs.upload.fileList;

this.$refs.upload.fileList. splice(fileList. indexOf(item), 1);

this. $emit( 'on-del-video', index)

},

// handleRemove (file) {

// const fileList = this.$refs.upload.fileList;

// this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);

// },

handleSuccess ( res, file) {

// console.log(res)

// console.log(file)

file.url = res.data.fileurl

res.data.name = file.name

res.data.hash = res.data.filehash

res.data.status = 'finished'

res.data.width = '195'

res.data.height = '110'

this. $emit( 'on-add-video', res)

},

handleFormatError ( file) {

this.$Notice. warning({

title: '文件格式不正确',

desc: '文件' + file.name + '格式不正确，请上传mp4格式'

});

},

handleMaxSize ( file) {

this.$Notice. warning({

title: '超出文件大小范围',

desc: '文件' + file.name + ' 太大了, 不允许超过 500M.'

});

},

handleBeforeUpload () {

const check = this.uploadList.length < 3;

if ( !check) {

this.$Notice. warning({

title: '不能超过3个视频'

});

return false;

}

return this. getToken()

},

// 获取token

getToken () {

return new Promise(( resolve, reject) => {

this.axios. get( this.$config.uploadUrl + 'file/uptoken')

. then( res => {

let data = res.data;

if (data.code === 200) {

this.uptoken = data.data.uptoken;

resolve()

}

})

. catch( err => {

reject(err)

})

})

}

},

mounted () {

this.$refs.upload.fileList = this.$refs.upload.fileList. concat( this.editVideo)

this.uploadList = this.$refs.upload.fileList

}

}

</ script>

< style scoped>

.demo-upload-list{

display: inline-block;

width: 195 px;

height: 130 px;

text-align: center;

line-height: 130 px;

border: 1 px solid transparent;

border-radius: 4 px;

overflow: hidden;

background: #fff;

position: relative;

box-shadow: 0 1 px 1 px rgba( 0, 0, 0, .2);

margin-right: 4 px;

}

.demo-upload-list img{

width: 100 %;

height: 100 %;

}

.demo-upload-list-cover{

display: none;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: rgba( 0, 0, 0, .6);

}

.demo-upload-list:hover .demo-upload-list-cover{

display: block;

}

.demo-upload-list-cover i{

color: #fff;

font-size: 20 px;

cursor: pointer;

margin: 0 2 px;

}

.del-btn{

position: absolute;

top: 5 px;

right: 10 px;

}

.desc{

color: #999

}

</ style>