图片大小限定html,element-ui el-upload限制图片格式尺寸及图片

element-ui el-upload限制图片格式尺寸及图片

html:

style="width:654px;hight:270px"

:before-upload="beforeUpload"

accept="image/png,image/jpg,image/jpeg"

class="upload-demo"

name="file"

ref="upload"

drag

:action="uploadPicture"

:on-success="uploadImgSuc"

list-type="picture"

:file-list="fileList"

:on-error="uploadImgErr">

将图片拖到此处，或 点击上传

图片尺寸限制为654 x 270，大小不可超过1MB

如果要现在图片的尺寸，大小，就在

:before-upload="beforeAvatarUpload"

这个函数里面去定义

js：

// 图片上传尺寸大小检验

beforeUpload (file) {

let _this = this

const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M

const isSize = new Promise(function (resolve, reject) {

let width = 654; // 限制图片尺寸为654X270

let height = 270;

let _URL = window.URL || window.webkitURL;

let img = new Image();

img.onload = function () {

let valid = img.width === width && img.height === height;

valid ? resolve() : reject();

}

img.src = _URL.createObjectURL(file);

}).then(() => {

return file;

}, () => {

_this.$message.error('图片尺寸限制为654 x 270，大小不可超过1MB')

return Promise.reject();

});

if (!is1M) {

_this.$message.error('图片尺寸限制为654 x 270，大小不可超过1MB')

}

return isSize&is1M

}

可上传图片的格式， 为HTML代码段中accept属性：accept="image/png,image/jpg,image/jpeg"