EditorImage.vue
3.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<div class="upload-container">
<el-button
:style="{background:color,borderColor:color}"
icon="el-icon-upload"
size="mini"
type="primary"
@click="dialogVisible=true"
>
<!-- upload -->
上传图片
</el-button>
<!-- action="https://httpbin.org/post" -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
<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"
:headers="headers"
:data="dataObj"
list-type="picture-card"
accept="image/jpeg,image/png,image/gif"
>
<el-button size="small" type="primary">
<!-- Click upload -->
点击上传
</el-button>
</el-upload>
<el-button @click="dialogVisible = false">
<!-- Cancel -->
取消
</el-button>
<el-button type="primary" @click="handleSubmit">
<!-- Confirm -->
确认
</el-button>
</el-dialog>
</div>
</template>
<script>
// import { getToken } from 'api/qiniu'
// import db from "@/utils/localstorage";
import { upUrl } from '@/utils/request'
import { getToken } from '@/utils/auth'
export default {
name: 'EditorSlideUpload',
props: {
color: {
type: String,
default: '#1890ff'
}
},
data() {
return {
dialogVisible: false,
listObj: {},
fileList: [],
headers: {
'Authorization-business': getToken()
},
action: upUrl,
dataObj: {
folderId: 1
}
}
},
created() {
// this.headers.token = "Bearer " + db.get("TOKEN", "");
this.headers.tenant = 'MDAwMA=='
},
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) {
this.listObj[objKeyArr[i]].url =this.$baseURL+response.data
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 => {
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;
.el-upload--picture-card {
width: 100%;
}
}
</style>