3f535f30
 杨鑫
'初始'
|
1
2
3
|
<template>
<div class="upload-container">
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
|
|
2310d7df
杨鑫
最新
|
4
|
上传
|
|
3f535f30
杨鑫
'初始'
|
5
6
7
8
9
10
11
12
13
|
</el-button>
<el-dialog :visible.sync="dialogVisible">
<el-upload
:multiple="true"
:file-list="fileList"
:show-file-list="true"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
|
|
2310d7df
杨鑫
最新
|
14
|
class="editor-slide-upload"
|
e94be901
 wesley88
1
|
15
|
:action="action"
|
|
3f535f30
杨鑫
'初始'
|
16
|
list-type="picture-card"
|
|
3f535f30
杨鑫
'初始'
|
17
18
19
20
21
|
>
<el-button size="small" type="primary">
点击上传
</el-button>
</el-upload>
|
|
2310d7df
杨鑫
最新
|
22
|
<el-button @click="dialogVisible = false">
|
|
3f535f30
杨鑫
'初始'
|
23
24
25
26
27
28
29
30
31
32
|
取消
</el-button>
<el-button type="primary" @click="handleSubmit">
确认
</el-button>
</el-dialog>
</div>
</template>
<script>
|
|
2310d7df
杨鑫
最新
|
33
|
// import { getToken } from 'api/qiniu'
|
|
e94be901
wesley88
1
|
34
|
import { upUrl } from '@/utils/request'
|
|
3f535f30
杨鑫
'初始'
|
35
36
37
38
39
40
41
42
43
44
45
46
|
export default {
name: 'EditorSlideUpload',
props: {
color: {
type: String,
default: '#1890ff'
}
},
data() {
return {
dialogVisible: false,
listObj: {},
|
|
e94be901
wesley88
1
|
47
48
|
fileList: [],
action:upUrl
|
|
3f535f30
杨鑫
'初始'
|
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
}
},
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('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
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) {
|
|
e94be901
wesley88
1
|
71
|
this.listObj[objKeyArr[i]].url =this.$baseURL+response.data
|
|
3f535f30
杨鑫
'初始'
|
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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) {
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;
|
|
2310d7df
杨鑫
最新
|
108
109
110
|
::v-deep .el-upload--picture-card {
width: 100%;
}
|
|
3f535f30
杨鑫
'初始'
|
111
112
|
}
</style>
|
