preface

There was a problem when I was developing with Vue +elementUI: upload checked the width and height of the image

At the beginning, I directly searched Baidu and Google and found no such problem. This should be a very common requirement, why element is not implemented? Maybe it is very simple, but there is no such problem on the Internet.

If we didn’t find it we had to do it ourselves

Train of thought

To verify the width and height of an image, obtain the width and height information of the image: image.onload

The onload event is executed immediately after the image is loaded.

let image = new Image();
image.onload = function() {
    let width = image.width;
    let height = image.height;
};
image.src = "images/bg.jpg";
Copy the code

So once I have that information I can compare it so let’s say I need a 750 by 420 image

letwidth = 750; // Image widthletheight = 420; // Image heightlet image = new Image();
image.onload = function() {
    let isSize = image.width == width && image.height == height;
    if(! isSize) { that.$message.error("Upload profile picture size does not match, can only be 750*420"); }}; image.src ="images/bg.jpg";
Copy the code

Now I want to get the uploaded picture information

BeforeAvatarUpload (file) {// Pre-upload image processing functionletwidth = 750; // Image widthletheight = 420; // Image heightlet _URL = window.URL || window.webkitURL;
    let image = new Image();
    img.onload = function() {
        let isSize = image.width == width && image.height == height;
        if(! isSize) { that.$message.error("Upload profile picture size does not match, can only be 750*420");
        }
        return isSize;
    };
    img.src = _URL.createObjectURL(file);
}
Copy the code

Now isSize was reassigned, with the correct prompt, but it was just a flash, and successfully uploaded, very frustrated, step by step I started the debugger, and found that I could still return, but I don’t know why, then I started Google again, and found that MY thinking was wrong.

After carefully checking the JS application scenario (Promise => image upload) in this article, I found that the Upload person really wanted a Promise. You gave isSize a Boolean value directly, and finally returned it, which actually had no effect. That explains why you can pop up an error message and upload it successfully, and that’s how you did it.

Or to see the source code, a look just a little eyebrow

upload(rawFile) {
    this.$refs.input.value = null;
    if(! this.beforeUpload) {return this.post(rawFile);
    }
    const before = this.beforeUpload(rawFile);
    if (before && before.then) {
    before.then(processedFile => {
        const fileType = Object.prototype.toString.call(processedFile);
        if (fileType === '[object File]' || fileType === '[object Blob]') {
        if (fileType === '[object Blob]') {
            processedFile = new File([processedFile], rawFile.name, {
            type: rawFile.type
            });
        }
        for (const p in rawFile) {
            if (rawFile.hasOwnProperty(p)) {
            processedFile[p] = rawFile[p];
            }
        }
        this.post(processedFile);
        } else {
        this.post(rawFile);
        }
    }, () => {
        this.onRemove(null, rawFile);
    });
    } else if(before ! = =false) {
         this.post(rawFile);
    } else{ this.onRemove(null, rawFile); }},Copy the code

This. BeforeUpload is a true promise. You must return a promise to the user. Simple Boolean values are useless because the user has many internal implementations of the promise. After various tests, it does.

Final code

BeforeAvatarUpload (file) {const isJPG = file.type ==="image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
    const isLt2M = file.size / 1024 / 1024 < 2;
    let that = this;
    let isAllow = false;
    if(! isJPG) { this.$message.error("Upload profile picture in JPG, PNG, GIF format only!");
    }
    if(! isLt2M) { this.$message.error("Upload profile picture size can not exceed 2MB!");
    }
    const isSize = new Promise(function(resolve, reject) {
        let width = 750;
        let height = 420;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function() {
          let valid = image.width == width && image.height == height;
          valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file);
    }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("Upload profile picture size does not match, can only be 750*420!");
          returnPromise.reject(); });return isJPG && isLt2M && isSize;
}
Copy the code

Saw the final version of the code found that it is indeed very simple, we are often led astray by the inherent thinking, in fact, or their own skills are not deep ah, later still want to pay more attention to the foundation, more mining details, small see big, practice internal strength, mutual encouragement!