vue.js javascript element ui上传限制图片格式及宽高像素问题

有时候需求需要限制图片上传格式及宽高像素的问题

比如上传图片的像素值的最大尺寸264*300

VUE

:file-list="facePicList"

:action="uploadUrl"

list-type="picture-card"

accept=".png"

:limit="1"

:on-exceed="masterFileMax" // 限制文件数量提示

:before-upload="detailBeforeUpload" // 上传前的方法，在这里去限制

:on-preview="handlePictureCardPreview" // 图片放大查看方法

:on-success="facePicSuccess"

:on-remove="facePicRemove"

:headers="myHeaders" // 添加请求头

>

// 需要提示信息

下面将在方法里去限制图片的上传类型和像素值限制

JS

// 图片放大查看

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible = true;

},

// 上传前的方法

detailBeforeUpload(file) {

let types = ["image/png"];

const isImage = types.includes(file.type);

// 限制上传的格式

if (!isImage) {

this.$message.error("上传图片只能是 PNG 格式!");

} else {

// 这个方法就是去限制上传图片的像素控制

return this.checkImageWH(file, 264, 330);

// return this.checkImageWH(file, 2000, 2000);

}

},

// 配置图片像素

checkImageWH(file, width, height) {

let self = this;

return new Promise(function (resolve, reject) {

let filereader = new FileReader();

filereader.onload = (e) => {

let src = e.target.result;

const image = new Image();

image.onload = function () {

if (width && this.width > width) {

self.$message.warning(

"请上传宽为小于或等于" + width + "像素的图片"

);

reject();

} else if (height && this.height > height) {

self.$message.warning(

"请上传高度小于或等于" + height + "像素的图片"

);

reject();

} else {

resolve();

}

};

image.onerror = reject;

image.src = src;

};

filereader.readAsDataURL(file);

});

},

文章来源

 您阅读本篇文章共花了：