vue限制上传图片的像素和像素
在这里我们使用的是ant design vue组件库的a-upload组件
首先,在H5里边放入a-table组件
<a-upload
:multiple="true"
list-type="picture-card"
:file-list="fileList"
action="/api/api-system/system/core/sysFile/upload"
@change="handleUpload"
:remove="removeFile"
@preview="handlePreview"
:beforeUpload="beforeFileUpload"
v-model="mdl.trademarkImage"
:disabled="readonly"
>
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">上传商标图样</div>
</div>
</a-upload>
在组件库描述中写了,做显示主要是利用组件的beforeUpload 的Api
beforeFileUpload(file, fileList) {
var this_ = this
this.loading = true
return new Promise((resolve, reject) => {
const isLt2KB = file.size / 1024 < 200
if (!isLt2KB) {
this_.$message.error('上传文件大于200kb!')
reject(false)
}
if (fileList.length > 1 || this.isFlag >= 1 || this_.fileList.length >= 1) {
this_.fileList = this_.fileList.slice(-1)
this_.$message.error('只能上传一张图片!')
reject(false)
}
var fileNames = file.name.split('.')
var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
var extList = ['jpg', 'png', 'gif']
if (!extList.find((item) => item == fileType)) {
this_.$message.error('只能上传.jpg/.png/.gif类型的图片!')
reject(false)
}
let width1 = 400
let height1 = 400
let width2 = 1500
let height2 = 1500
let _URL = window.URL || window.webkitURL
let img = new Image()
img.onload = function () {
let valid = img.width >= width1 && img.width <= width2 && img.height >= height1 && img.height <= height2
valid ? resolve() : reject()
if (!valid) {
this_.$message.error('上传图片像素介于"400×400-1500×1500之间!')
reject(false)
} else {
resolve(true)
}
}
img.src = _URL.createObjectURL(file)
}).finally(() => {
this.loading = false
})
},