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
| <template>
| <div class="component-upload-image">
| <el-upload
| :action="uploadImgUrl"
| list-type="picture-card"
| :on-success="handleUploadSuccess"
| :before-upload="handleBeforeUpload"
| :on-error="handleUploadError"
| name="file"
| :show-file-list="false"
| :headers="headers"
| style="display: inline-block; vertical-align: top"
| >
| <el-image v-if="!value" :src="value">
| <div slot="error" class="image-slot">
| <i class="el-icon-plus" />
| </div>
| </el-image>
| <div v-else class="image">
| <el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/>
| <div class="mask">
| <div class="actions">
| <span title="预览" @click.stop="dialogVisible = true">
| <i class="el-icon-zoom-in" />
| </span>
| <span title="移除" @click.stop="removeImage">
| <i class="el-icon-delete" />
| </span>
| </div>
| </div>
| </div>
| </el-upload>
| <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
| <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;">
| </el-dialog>
| </div>
| </template>
|
| <script>
| import { getToken } from "@/utils/auth";
|
| export default {
| data() {
| return {
| dialogVisible: false,
| uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
| headers: {
| Authorization: "Bearer " + getToken(),
| },
| };
| },
| props: {
| value: {
| type: String,
| default: "",
| },
| },
| methods: {
| removeImage() {
| this.$emit("input", "");
| },
| handleUploadSuccess(res) {
| this.$emit("input", res.url);
| this.loading.close();
| },
| handleBeforeUpload() {
| this.loading = this.$loading({
| lock: true,
| text: "上传中",
| background: "rgba(0, 0, 0, 0.7)",
| });
| },
| handleUploadError() {
| this.$message({
| type: "error",
| message: "上传失败",
| });
| this.loading.close();
| },
| },
| watch: {},
| };
| </script>
|
| <style scoped lang="scss">
| .image {
| position: relative;
| .mask {
| opacity: 0;
| position: absolute;
| top: 0;
| width: 100%;
| background-color: rgba(0, 0, 0, 0.5);
| transition: all 0.3s;
| }
| &:hover .mask {
| opacity: 1;
| }
| }
| </style>
|
|
