el-upload 上传图片的限制

 <div class="upImg">

                    <el-upload class="avatar-uploader"

                               action="urlPath"

                               :show-file-list="false"

                               :on-success="handleImgSuccess"

                               :before-upload="beforeImgUpload">

                        <img v-if="form.imageUrl"

                             :src="form.imageUrl"

                             class="avatar">

                        <i v-else

                           class="el-icon-plus avatar-uploader-icon"></i>

                    </el-upload>

                </div>

                <div class="el-upload__tip">大小：750*450，格式：jpg、jpeg、png</div>

 // 上传图片

        handleImgSuccess(event, file, fileList) {

            this.form.imageUrl = event.data

        },

        beforeImgUpload(file) {

            const isJPG = (file.type == 'image/jpeg') || (file.type == 'image/jpg') || (file.type == 'image/gif') || (file.type == 'image/png');

            const isLt2M = file.size / 1024 / 1024 < 2;

 

            if (!isJPG) {

                this.$message.error('上传头像图片只能是 JPEG/JPG/GIF/PNG 格式!');

                return false;

            }

            if (!isLt2M) {

                this.$message.error('上传头像图片大小不能超过 2MB!');

                return false;

            }

          //限制图片的大小

            if (this.validWidth && this.validHeight) {

                return this.valWidthAndHeight(file)

            } else{

                return isJPG && 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();

                }

            );

        },