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!