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
| <template>
| <el-upload
| :action="uploadAction"
| :on-remove="handleRemove"
| :on-success="handleSuccess"
| :on-exceed="handleExceed"
| :on-error="handleError"
| :show-file-list="false"
| :file-list="state.filered"
| :multiple='false'
| limit.number=1
| >
| <img
| v-if="imageUrl"
| :src="imageUrl"
| class="avatar"
| >
| <i
| v-else
| class="el-icon-plus avatar-uploader-icon"
| ></i>
| </el-upload>
| </template>
|
| <script>
| export default {
| props: {
| // 上传图片的接口地址
| uploadAction: {
| type: String,
| required: true,
| },
| // 上传成功的回调函数
| successCallBack: {
| type: Function,
| required: true,
| },
| },
| data() {
| return {
| imageUrl: "",
| state: {
| fileList: [],
| },
| };
| },
| methods: {
| // 上传成功
| handleSuccess(response, file, fileList) {
| console.log(response, file, fileList);
| // 判断，如果返回1，就是成功
| if (response.status === 1) {
| // this.imageUrl = URL.createObjectURL(file.raw);
| // 如果方法存在，将执行
| this.successCallBack && this.successCallBack(response.data);
| // 提示
| this.$message({
| message: "上传成功",
| type: "error",
| duration: 1000, //显示时间
| });
| }
| },
| // 上传失败
| handleError(err, file, fileList) {
| console.log(this.uploadAction, "this.uploadAction");
| // 提示
| this.$message({
| message: "上传失败，请重新上传",
| type: "error",
| duration: 1000, //显示时间
| });
| },
| // 删除图片
| handleRemove(file, fileList) {
| // 如果状态码为success
| console.log((file, fileList));
| this.successCallBack && this.successCallBack(null);
| },
| //文件超出个数
| handleExceed(files, fileList) {
| // 提示
| this.$message({
| message: "只能上传一张图片",
| type: "info",
| duration: 1000, //显示时间
| });
| console.log(files, fileList);
| },
| },
| };
| </script>
|
| <style lang="scss" scoped>
| .avatar-uploader .el-upload {
| border: 1px dashed #d9d9d9;
| border-radius: 6px;
| cursor: pointer;
| position: relative;
| overflow: hidden;
| }
| .avatar-uploader .el-upload:hover {
| border-color: #409eff;
| }
| .avatar-uploader-icon {
| font-size: 28px;
| color: #8c939d;
| width: 178px;
| height: 178px;
| border: 1px solid #dcdfe6;
| line-height: 178px;
| text-align: center;
| }
| .avatar {
| width: 178px;
| height: 178px;
| display: block;
| }
| </style>
|
|
