<el-upload class="avatar-uploader" action="http://************/file/upload" :show-file-list="false" name="image" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="form.attachment" :src="form.attachment" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> <div slot="tip" class="el-upload__tip">封面图只能上传jpeg/png/jpg文件,且不超过500kb</div> </el-upload>
在上传图片之前
before-upload进行判断,注意判断顺序 return new Promise放最后
img.naturalWidth 和 img.naturalHeight 可以得到宽高,也可以限制图片具体像素大小
beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 5; if (!isJPG) { this.$message.error('上传头像图片只能是 jpeg/png/jpg 格式!'); return false }else if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 5MB!'); return false } return new Promise((resolve,reject) => { let reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { let img = new Image() img.src = reader.result img.onload = () => { if (img.naturalWidth / img.naturalHeight !== 2) { this.$message.error(`请上传宽高比为2:1的图片!`) return reject(false) } else { return resolve(true) } } } }) },