<el-upload
class="avatar-uploader"
accept="image/png,image/jpg,image/jpeg"
:action="url"
:limit="1"
:show-file-list="false"
:before-upload="beforeImgUpload"
:on-success="handleAvatarSuccess">
<el-image
style="width: 178px;height: 178px;"
v-if="form.banImageUrl" :src="form.banImageUrl"
:fit="'contain'"></el-image>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip" class="el-upload__tip">只能上传 1920 * 560 的jpg/png文件,且不超过 10M</div>
</el-upload>
<script>
export default {
data: {
return {
validWidth: 1920,
validHeight: 560
}
},
methods: {
beforeImgUpload (file) {
const isLt2M = file.size / 1024 / 1024 < 20
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 10MB!')
return false
}
// 限制图片的大小
if (this.validWidth && this.validHeight) {
return this.valWidthAndHeight(file)
} else {
return isLt2M
}
},
// 验证图片宽高
valWidthAndHeight (file) {
let _this = this
return new Promise(function (resolve, reject) {
let width = _this.validWidth// 图片宽度
let height = _this.validHeight// 图片高度
let _URL = window.URL || window.webkitURL
let image = new Image()
image.src = _URL.createObjectURL(file)
image.onload = function () {
let valid = image.width == width && image.height == height
valid ? resolve() : reject()
}
}).then(
() => {
return file
},
() => {
this.$message.error('上传图片尺寸不符合,只能是' + _this.validWidth + '*' + _this.validHeight + '!')
return Promise.reject()
}
)
},
}
}
</script>
el-upload 限制图片上传大小
最新推荐文章于 2024-06-13 08:58:58 发布