JS图片上传前校验大小、尺寸
<template>
<div>
<!-- Start 图片上传组件 -->
<el-upload class="common-upload-img-container"
action="/uploadTODO"
list-type="picture-card"
:accept="accept"
:file-list="fileList"
:before-upload="beforeUpload"
:on-preview="() => showViewer = true"
:on-remove="handleRemove"
:on-success="handleUploadSuc"
:on-error="handleUploadFail"
:disabled="disabled"
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- End 图片上传组件 -->
<!-- Start 图片预览组件 -->
<el-image-viewer
v-if="showViewer"
:on-close="() => { showViewer = false }"
:url-list="imgList"
:initialIndex="0"
/>
<!-- End 图片预览组件 -->
</div>
</template>
<script>
// 引入图片预览组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
name: 'CommonUploadImg',
components: { ElImageViewer },
props: {
name: { // 字段name
type: String,
default: '',
},
accept: {
type: String,
default: 'image/*',
},
limitSize: { // 上传图片大小限制,单位kb
type: Number,
default: 300,
},
disabled: {
type: Boolean,
},
size: { // 图片尺寸限制
type: Object,
default: () => {
return {
width: null,
height: null,
minWidth: null,
minHeight: null,
maxWidth: null,
maxHeight: null,
}
},
},
},
data() {
return {
fileList: [],
showViewer: false, // 图片预览组件
initialIndex: 0, // 图片预览index
}
},
computed: {
imgList() {
return this.fileList.map((item) => {
return item.url
})
},
},
methods: {
beforeUpload(file) {
const isImg = /image\/\w+/.test(file.type)
const isLtSize = (file.size / 1024) < this.limitSize
if (!isImg) {
this.$message.error('请上传图片!')
return false
} else if (!isLtSize) {
this.$message.error(`上传图片大小不能超过 ${this.limitSize}KB!`)
return false
}
let _this = this
// 获取文件尺寸,判断尺寸在不在规定范围之内
return new Promise(function (resolve, reject) {
const { width, height, minWidth, minHeight, maxWidth, maxHeight } = _this.size
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function () {
const w = this.width
const h = this.height
if ((width && w !== width) ||
(height && h !== height) ||
(minWidth && w < minWidth) ||
(minHeight && h < minHeight) ||
(maxWidth && w > maxWidth) ||
(maxHeight && h > maxHeight)) {
_this.$message.error(`上传图片尺寸${w}*${h}不对,请重新上传!`)
reject(new Error('图片尺寸不对'))
}
resolve(file)
_this.uploadImgLoading = true
}
}
})
},
handleUploadSuc(response, file, fileList) {
if (response.code !== 200) {
this.$message.error(response.msg || '上传失败,稍后重试')
return
}
fileList = []
const { url } = response.data
// this.fileList = [{ name: file.name, url: file.url }]
this.fileList = [file]
this.$emit('on-success', url, this.name)
},
handleUploadFail() {
this.$message.error('上传失败,稍后重试')
},
handleRemove() {
this.fileList = []
this.$emit('on-remove', '', this.name)
},
},
}
</script>
<style lang="scss">
.common-upload-img-container {
.el-upload--picture-card, .el-upload-list__item {
width: 120px;
height: 120px;
}
.is-disabled {
& + .el-upload--picture-card {
cursor: not-allowed;
border-color: #C0C4CC!important;
.el-icon-plus {
color: #C0C4CC!important;
}
}
}
}
.is-error .common-upload-img-container {
.el-upload--picture-card {
border-color: #F56C6C;
}
.el-icon-plus {
color: #F56C6C;
}
}
</style>
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
上次更新: 2021-05-17 11:08:35