<template>
|
<div style="padding: 20px">
|
<el-row>
|
<el-col :span="18">
|
<div>
|
<el-upload
|
class="upload-demo"
|
drag
|
:action="videoUrl"
|
ref="videoUpload"
|
accept=".mp4"
|
:auto-upload="false"
|
:limit="1"
|
:file-list="videoFileList"
|
:data="submitData"
|
:on-success="successHandle">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">只能上传mp4文件，且不超过10MB</div>
|
</el-upload>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div>
|
<button class="btn" @click="videoSubmitUpload"></button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
videoUrl: '',
|
videoFileList: [],
|
submitData: {
|
lightemitId: ''
|
}
|
}
|
},
|
computed: {
|
lightemitStateId () {
|
return this.$store.state.led.lightemitId
|
}
|
},
|
mounted () {
|
this.init()
|
},
|
watch: {
|
lightemitStateId (curVal, oldVal) {
|
this.submitData.lightemitId = curVal
|
}
|
},
|
methods: {
|
init () {
|
this.videoFileList = []
|
this.submitData.lightemitId = this.$store.state.led.lightemitId
|
this.videoUrl = this.$http.adornUrl(`/pole/polelightemit/videoUpload?token=${this.$cookie.get('token')}`)
|
},
|
onChangePhoto (file, fileList) {
|
this.photoFileList = fileList
|
},
|
videoSubmitUpload () {
|
this.$refs.videoUpload.submit()
|
},
|
// 文件上传成功回调函数
|
successHandle (response, file, fileList) {
|
if (response && response.code === 0) {
|
this.$message({
|
message: '操作成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.videoFileList = []
|
// this.visible = false
|
// this.$emit('refreshDataList')
|
}
|
})
|
} else {
|
this.$message.error(response.msg)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.btn {
|
border-style: none;
|
width: 100px;
|
height: 35px;
|
background: url(~@/assets/img/btn-config.png);
|
background-repeat:no-repeat;
|
border-style: none;
|
background-size: 100%;
|
color: #fff;
|
font-size: 1.4em;
|
font-weight: 550;
|
};
|
</style>
|
