需求分析：
表单中需要上传图片，并对图片做出限制：
1）上传图片大小不能超过 2M；
2）上传图片格式只能是jpg或png；
3）上传图片的宽高比例为2：1。
效果如图所示：
利用on-change的钩子写判断方法。
HTML：
<el-form-item label="LOGO" prop="logo_src"><el-uploadref="upload"class="avatar-uploader"action="#":show-file-list="false":on-change="picchange":limit="1":auto-upload="false"><imgv-if="form.logo_src != ''":src="form.logo_src"class="avatar"/><i v-else class="el-icon-plus avatar-uploader-icon"></i><span slot="tip" class="el-upload__tip">只能上传宽高比例为2：1的 jpg/png文件，且不超过2M</span></el-upload></el-form-item>
CSS样式：
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409eff;}.avatar-uploader-icon {color: #8c939d;width: 50px;height: 50px;line-height: 50px;text-align: center;}.el-upload__tip {position: relative;bottom: 20px;left: 20px;}.avatar {width: 50px;height: 50px;display: block;}
JS：（其中uploadlogo须在data中声明，存储图片文件，这是提交表单时所需要传参的数据）
// 改变logo图片时做判断picchange(file) {this.$refs.upload.clearFiles()console.log(file)const isJPG =file.raw.type === "image/jpeg" || file.raw.type === "image/png"const isLt2M = file.raw.size / 1024 / 1024 < 2if (!isLt2M) {this.$message.warning("上传图片大小不能超过 2M!")return false} else if (!isJPG) {this.$message.warning("上传图片格式只能是jpg或png")return false} else {this.imgchecked(file).then((data) => {//data返回值即为判断结果。if (data) {this.form.logo_src = URL.createObjectURL(file.raw)//预览图this.logoupload = file.raw}})}},//判断尺寸方法imgchecked(file) {return new Promise((resolve, reject) => {let reader = new FileReader()reader.readAsDataURL(file.raw) // 必须用file.rawreader.onload = () => {// 让页面中的img标签的src指向读取的路径let img = new Image()img.src = reader.resultimg.onload = () => {if (img.width / img.height !== 2) {this.$message.warning(`需上传图片宽高比例为2：1,当前文件${img.width}×${img.height}`)resolve(false)} else {resolve(true)}}}})},
打印出file看看。
file文件中直接存储有图片名字、大小和类型，如果不需要判断尺寸只用picchange即可，我这里是直接把判断宽高比的操作提出来了。
判断图片的宽高的操作利用了JavaScript的原生API FileReader。
是在这位大佬这边看到的解决方法：/m0_48721669/article/details/118941638?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242
当文件读取完成后就可以获取img的宽高啦。
因为对Promise对象不熟所以弄了很久，需要通过then（）来获取判断结果。需要复习：
/#docs/promise
/lvdabao/p/es6-promise-1.html
