新需求,vue+element ui实现图片上传,但上传的图片有尺寸限制,只能是164x103的
:before-upload="beforeAvatarUpload" // 在el-upload标签中加入此事件
beforeAvatarUpload(file) {
// const isLt2M = file.size / 1024 / 1024 < 2;
//调用[限制图片尺寸]函数
let _this = this;
let imgWidth = "";
let imgHight = "";
const isSize = new Promise(function (resolve, reject) {
let width = 164;
let height = 103;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function () {
imgWidth = img.width;
imgHight = img.height;
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
_this.$message.warning({
message:
"上传文件的图片大小不合符标准,宽需要为164px,高需要为103px。当前上传图片的宽高分别为:" +
imgWidth +
"px和" +
imgHight +
"px",
btn: false,
});
return Promise.reject();
}
);
// if (!isLt2M) {
// this.$message.error("上传头像图片大小不能超过 2MB!");
// }
return isSize;
},