基于element封装一个公共的限制图片宽高的方法

tech2025-06-23  17

utils文件里面增加: 

/** * 用于图片上传时校验图片的宽高 * @param file file对象 * @param width 规定的图片宽度 * @param height 规定的图片高度 */ export function imgSize(context,file, width, height) { let ruleWidth = width let ruleHeight = height const isSize = new Promise((resolve, reject) => { let url = window.URL || window.webkitURL let img = new Image() img.onload = function () { // 图片比例校验 let valid = img.width === ruleWidth && img.height === ruleHeight console.log(valid,'valid...') valid ? resolve() : reject(new Error('error..')) } img.src = url.createObjectURL(file) }).then( () => { return file }, () => { context.$message.error({ message: `上传文件的图片大小不符合标准,宽需要为${ruleWidth}px,高需要为${ruleHeight}px`, btn: false }) return Promise.reject(new Error('error..')) } ) return isSize }

使用:

import { imgSize } from '@utils/common' // 上传前限制 beforeUpload(file) { console.log(file,'file...') const isSize = imgSize(this, file, 150, 150) const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' const isLimit = file.size / 1024 <= 500 !isJPG && this.$message.error('上传的图片接受JPG,PNG格式') !isLimit && this.$message.error('上传的图片大小不能超过 500KB!') return isJPG && isLimit && isSize },

 

最新回复(0)