vue+element上传图片组件限制图片的宽高

vue+element上传图片组件限制图片的宽高

html代码：

<el-form-item label="图片" :label-width="formLabelWidth">
					<el-upload
						:action="upload_qiniu_url"
						:before-upload="handleImagesUrlBefore"
						:file-list="imgs"
						:on-success="successfun"
						:data="qiniuData"
						list-type="picture-card"
						:on-remove="handleRemove"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">330*240(等比倍数)图片大小</div>
					</el-upload>
				</el-form-item>

在上传之前,对图片进行限制
js代码：

handleImagesUrlBefore:function(file){
                var _this = this;
                return new Promise(function(resolve, reject) {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var image = new Image();
                        image.onload = function () {
                            var width = this.width;
                            var height = this.height;
                            if (width>695 || width < 685){
                                _this.$alert('图片尺寸必须在685~695之间！', '提示', {confirmButtonText: '确定'});
                                reject();
                            }
                            if (height >695||height< 685) {
                                _this.$alert('图片尺寸必须在685~695之间！', '提示', {confirmButtonText: '确定'});
                                reject();
                            }
                            resolve();
                        };
                        image.src = event.target.result;
                    }
                    reader.readAsDataURL(file);
                });
            }

这样在你上传图片的时候，必须上传规定尺寸的才可以！
over！