|
|
<template>
|
|
|
<div class="upload-container">
|
|
|
<el-button icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
|
|
|
上传图片
|
|
|
</el-button>
|
|
|
<el-dialog :visible.sync="dialogVisible" :modal="false">
|
|
|
<el-upload
|
|
|
:multiple="true"
|
|
|
:file-list="fileList"
|
|
|
:show-file-list="true"
|
|
|
:on-remove="handleRemove"
|
|
|
:on-success="handleSuccess"
|
|
|
:before-upload="beforeUpload"
|
|
|
class="editor-slide-upload"
|
|
|
:action="action"
|
|
|
list-type="picture-card"
|
|
|
>
|
|
|
<el-button size="small" type="primary">
|
|
|
点击上传
|
|
|
</el-button>
|
|
|
</el-upload>
|
|
|
<el-button @click="dialogVisible = false">
|
|
|
取消
|
|
|
</el-button>
|
|
|
<el-button type="primary" @click="handleSubmit">
|
|
|
确认
|
|
|
</el-button>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { Message } from 'element-ui'
|
|
|
|
|
|
export default {
|
|
|
name: 'EditorSlideUpload',
|
|
|
props: {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
|
|
|
dialogVisible: false,
|
|
|
listObj: {},
|
|
|
fileList: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
checkAllSuccess() {
|
|
|
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
|
|
|
},
|
|
|
handleSubmit() {
|
|
|
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
|
|
|
if (!this.checkAllSuccess()) {
|
|
|
this.$message('请等待所有图片上传成功。如有网络问题，请刷新页面重新上传!')
|
|
|
return
|
|
|
}
|
|
|
this.$emit('successCBK', arr)
|
|
|
this.listObj = {}
|
|
|
this.fileList = []
|
|
|
this.dialogVisible = false
|
|
|
},
|
|
|
handleSuccess(response, file) {
|
|
|
const uid = file.uid
|
|
|
const objKeyArr = Object.keys(this.listObj)
|
|
|
for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
|
|
if (this.listObj[objKeyArr[i]].uid === uid) {
|
|
|
this.listObj[objKeyArr[i]].url = response.url
|
|
|
this.listObj[objKeyArr[i]].hasSuccess = true
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
handleRemove(file) {
|
|
|
const uid = file.uid
|
|
|
const objKeyArr = Object.keys(this.listObj)
|
|
|
for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
|
|
if (this.listObj[objKeyArr[i]].uid === uid) {
|
|
|
delete this.listObj[objKeyArr[i]]
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
beforeUpload(file) {
|
|
|
console.log(file)
|
|
|
if((file.size/1000) > 1024){
|
|
|
Message({
|
|
|
type:'warning',
|
|
|
message:'上传图片大小超过1M！'
|
|
|
})
|
|
|
return false
|
|
|
}
|
|
|
const _self = this
|
|
|
const _URL = window.URL || window.webkitURL
|
|
|
const fileName = file.uid
|
|
|
this.listObj[fileName] = {}
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const img = new Image()
|
|
|
img.src = _URL.createObjectURL(file)
|
|
|
img.onload = function() {
|
|
|
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
|
|
|
}
|
|
|
resolve(true)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.editor-slide-upload {
|
|
|
margin-bottom: 20px;
|
|
|
::v-deep .el-upload--picture-card {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
