Skip to content

Commit 677fdb2

Browse files
PanJiaChenPanJiaChen
committed
singleImage => SingleImage
1 parent ba10230 commit 677fdb2

File tree

4 files changed

+423
-1
lines changed

4 files changed

+423
-1
lines changed

‎src/components/Upload/SingleImage.vue

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<template>
2+
<div class="upload-container">
3+
<el-upload
4+
:data="dataObj"
5+
:multiple="false"
6+
:show-file-list="false"
7+
:on-success="handleImageSuccess"
8+
class="image-uploader"
9+
drag
10+
action="https://httpbin.org/post"
11+
>
12+
<i class="el-icon-upload" />
13+
<div class="el-upload__text">
14+
将文件拖到此处，或<em>点击上传</em>
15+
</div>
16+
</el-upload>
17+
<div class="image-preview">
18+
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
19+
<img :src="imageUrl+'?imageView2/1/w/200/h/200'">
20+
<div class="image-preview-action">
21+
<i class="el-icon-delete" @click="rmImage" />
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<script>
29+
// 预览效果见付费文章
30+
import { getToken } from '@/api/qiniu'
31+
32+
export default {
33+
name: 'SingleImageUpload',
34+
props: {
35+
value: {
36+
type: String,
37+
default: ''
38+
}
39+
},
40+
data() {
41+
return {
42+
tempUrl: '',
43+
dataObj: { token: '', key: '' }
44+
}
45+
},
46+
computed: {
47+
imageUrl() {
48+
return this.value
49+
}
50+
},
51+
methods: {
52+
rmImage() {
53+
this.emitInput('')
54+
},
55+
emitInput(val) {
56+
this.$emit('input', val)
57+
},
58+
handleImageSuccess() {
59+
this.emitInput(this.tempUrl)
60+
},
61+
beforeUpload() {
62+
const _self = this
63+
return new Promise((resolve, reject) => {
64+
getToken().then(response => {
65+
const key = response.data.qiniu_key
66+
const token = response.data.qiniu_token
67+
_self._data.dataObj.token = token
68+
_self._data.dataObj.key = key
69+
this.tempUrl = response.data.qiniu_url
70+
resolve(true)
71+
}).catch(err => {
72+
console.log(err)
73+
reject(false)
74+
})
75+
})
76+
}
77+
}
78+
}
79+
</script>
80+
81+
<style lang="scss" scoped>
82+
@import "~@/styles/mixin.scss";
83+
.upload-container {
84+
width: 100%;
85+
position: relative;
86+
@include clearfix;
87+
.image-uploader {
88+
width: 60%;
89+
float: left;
90+
}
91+
.image-preview {
92+
width: 200px;
93+
height: 200px;
94+
position: relative;
95+
border: 1px dashed #d9d9d9;
96+
float: left;
97+
margin-left: 50px;
98+
.image-preview-wrapper {
99+
position: relative;
100+
width: 100%;
101+
height: 100%;
102+
img {
103+
width: 100%;
104+
height: 100%;
105+
}
106+
}
107+
.image-preview-action {
108+
position: absolute;
109+
width: 100%;
110+
height: 100%;
111+
left: 0;
112+
top: 0;
113+
cursor: default;
114+
text-align: center;
115+
color: #fff;
116+
opacity: 0;
117+
font-size: 20px;
118+
background-color: rgba(0, 0, 0, .5);
119+
transition: opacity .3s;
120+
cursor: pointer;
121+
text-align: center;
122+
line-height: 200px;
123+
.el-icon-delete {
124+
font-size: 36px;
125+
}
126+
}
127+
&:hover {
128+
.image-preview-action {
129+
opacity: 1;
130+
}
131+
}
132+
}
133+
}
134+
135+
</style>

‎src/components/Upload/SingleImage2.vue

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<template>
2+
<div class="singleImageUpload2 upload-container">
3+
<el-upload
4+
:data="dataObj"
5+
:multiple="false"
6+
:show-file-list="false"
7+
:on-success="handleImageSuccess"
8+
class="image-uploader"
9+
drag
10+
action="https://httpbin.org/post"
11+
>
12+
<i class="el-icon-upload" />
13+
<div class="el-upload__text">
14+
Drag或<em>点击上传</em>
15+
</div>
16+
</el-upload>
17+
<div v-show="imageUrl.length>0" class="image-preview">
18+
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
19+
<img :src="imageUrl">
20+
<div class="image-preview-action">
21+
<i class="el-icon-delete" @click="rmImage" />
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<script>
29+
import { getToken } from '@/api/qiniu'
30+
31+
export default {
32+
name: 'SingleImageUpload2',
33+
props: {
34+
value: {
35+
type: String,
36+
default: ''
37+
}
38+
},
39+
data() {
40+
return {
41+
tempUrl: '',
42+
dataObj: { token: '', key: '' }
43+
}
44+
},
45+
computed: {
46+
imageUrl() {
47+
return this.value
48+
}
49+
},
50+
methods: {
51+
rmImage() {
52+
this.emitInput('')
53+
},
54+
emitInput(val) {
55+
this.$emit('input', val)
56+
},
57+
handleImageSuccess() {
58+
this.emitInput(this.tempUrl)
59+
},
60+
beforeUpload() {
61+
const _self = this
62+
return new Promise((resolve, reject) => {
63+
getToken().then(response => {
64+
const key = response.data.qiniu_key
65+
const token = response.data.qiniu_token
66+
_self._data.dataObj.token = token
67+
_self._data.dataObj.key = key
68+
this.tempUrl = response.data.qiniu_url
69+
resolve(true)
70+
}).catch(() => {
71+
reject(false)
72+
})
73+
})
74+
}
75+
}
76+
}
77+
</script>
78+
79+
<style lang="scss" scoped>
80+
.upload-container {
81+
width: 100%;
82+
height: 100%;
83+
position: relative;
84+
.image-uploader {
85+
height: 100%;
86+
}
87+
.image-preview {
88+
width: 100%;
89+
height: 100%;
90+
position: absolute;
91+
left: 0px;
92+
top: 0px;
93+
border: 1px dashed #d9d9d9;
94+
.image-preview-wrapper {
95+
position: relative;
96+
width: 100%;
97+
height: 100%;
98+
img {
99+
width: 100%;
100+
height: 100%;
101+
}
102+
}
103+
.image-preview-action {
104+
position: absolute;
105+
width: 100%;
106+
height: 100%;
107+
left: 0;
108+
top: 0;
109+
cursor: default;
110+
text-align: center;
111+
color: #fff;
112+
opacity: 0;
113+
font-size: 20px;
114+
background-color: rgba(0, 0, 0, .5);
115+
transition: opacity .3s;
116+
cursor: pointer;
117+
text-align: center;
118+
line-height: 200px;
119+
.el-icon-delete {
120+
font-size: 36px;
121+
}
122+
}
123+
&:hover {
124+
.image-preview-action {
125+
opacity: 1;
126+
}
127+
}
128+
}
129+
}
130+
</style>

0 commit comments

Comments
 (0)