上传图片(限制宽高)

 

                class="upload-poster"

                action="#"

                :on-progress="logoPreview"

                :show-file-list="false"

                :before-upload="

                    beforeAvatarUpload.bind(this, 500, 60, 'reclogoFile')

                "

                :auto-upload="true"

            >

                

                    :src="imgURL "

                    class="avatar"

                />

 

                

                    (建议尺寸59*17)

                

            

  data() {

        return {

            imgURL:"xxxx"

        }    

   }

//公共限制宽高

beforeAvatarUpload(width, height, type, file) {

            let fileName = file.name;

            let regex = /(.jpg|.jpeg|.gif|.png)$/; //图片格式校验

            if (type == "reclogoFile") {

                if (!regex.test(fileName.toLowerCase())) {

                    return false;

                }

            }

            return new Promise(function(resolve, reject) {

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

                let img = new Image();

                img.onload = function() {

                    let valid = img.width >= width && img.height >= height;//传入宽高

                    valid ? reject() : resolve();

                };

                img.src = _URL.createObjectURL(file);

            }).then(

                () => {

                    return file;

                },

                () => {

                    this.$message.error("图片尺寸大小不符合要求,请重新上传!");

                    return Promise.reject();

                }

            );

        },

logoPreview(event, file) {

            this.form.reclogoFile = URL.createObjectURL(file.raw);

        },

你可能感兴趣的:(上传图片(限制宽高))