<template>
|
<div style="padding: 20px">
|
<el-row>
|
<el-col :span="18">
|
<div>
|
<el-upload
|
class="upload-demo"
|
drag
|
:action="photoUrl"
|
ref="photoUpload"
|
accept=".jpg,.png"
|
:auto-upload="false"
|
:file-list="photoFileList"
|
:on-change="onChangePhoto"
|
list-type="picture"
|
multiple>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
</el-upload>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div>
|
<button class="btn" @click="photoSubmitUpload"></button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
import Vue from 'vue'
|
export default {
|
data () {
|
return {
|
photoUrl: '',
|
photoFileList: [],
|
submitData: {
|
lightemitId: ''
|
}
|
}
|
},
|
methods: {
|
init () {
|
this.photoFileList = []
|
this.photoUrl = this.$http.adornUrl(`/pole/polelightemit/photoUpload?token=${this.$cookie.get('token')}`)
|
},
|
onChangePhoto (file, fileList) {
|
this.photoFileList = fileList
|
},
|
photoSubmitUpload () {
|
let formData = new FormData() // 用FormData存放上传文件
|
this.photoFileList.forEach(file => {
|
formData.append('file', file.raw)
|
})
|
formData.append('file', this.photoFileList)
|
formData.append('lightemitId', this.$store.state.led.lightemitId)
|
let ax = axios.create()
|
let config = {
|
headers: {
|
'Content-Type': 'multipart/form-data',
|
'xiaoxuetongxue-sessionId': Vue.cookie.get('token')
|
}
|
}
|
ax.post(this.$http.adornUrl(`/pole/polelightemit/photoUpload?token=${this.$cookie.get('token')}`), formData, config).then(result => {
|
this.$message({
|
message: '操作成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.photoFileList = []
|
// this.visible = false
|
// this.$emit('refreshDataList')
|
}
|
})
|
}).catch(err => {
|
this.$message.error(err)
|
})
|
}
|
}
|
}
|
</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;
|
};
|
div{
|
/deep/ .el-upload-list {
|
white-space:nowrap;
|
width:360px;
|
overflow-x:scroll;
|
}
|
/deep/ .el-upload-list__item {
|
display: inline-block;
|
width: 79px !important;
|
background-color: #123461;
|
/deep/ .el-icon-document {
|
color: transparent;
|
}
|
}
|
}
|
</style>
|
