element-ui框架下实现图片类型，大小，宽高限制上传功能

功能实现只要依赖框架自带的Upload组件 在el-upload各个钩子中进行处理 来实现图片 大小 宽高限制

template中代码如下 主要用到了before-upload，on-success，on-error，show-file-list，list-type，action这几个参数

<el-upload class="el-form-item" 
    :before-upload='beforeAvatarUpload' 
    :on-success='handleAvatarSuccess'
    :on-error='errorFn' 
    :show-file-list="false" 
    list-type="picture" 
    action="/upload-img">
<el-button slot="trigger" size="small" type="primary">上传背景图</el-button>

1.before-upload 上传文件之前的钩子
2.on-success  文件上传成功时的钩子 
3.on-error  文件上传失败时的钩子
4.show-file-list 是否显示已上传文件列表 
5.list-type 文件列表的类型
6.action 你所要上传的地址

下边为各个钩子内的处理

//上传文件之前的钩子 主要对图片上传前进行判断拦截
beforeAvatarUpload(file) {
    const isType = file.type === "image/jpg" || file.type === "image/png";
    const is1M = file.size / 1024 / 1024 < 1;
    if (!isType) {
        this.$message.error('上传图片只能是 JPG 和 Png 格式!')
        return false;
    }
    if (!is1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
        return false;
    }
    const isSize = new Promise((resolve, reject) => {
        const width = 750;
        const height = 1334;
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.onload = () => {
            const valid = img.height == height && img.width === width;
            valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
    }).then(
        () => {
            return file;
        },
        () => {
            this.$message.error('图片尺寸宽高必须为750*1334!')
            return Promise.reject();
        },
    );
    return isSize;
},
//文件上传成功时的钩子 一般上传接口 是把你的图片上传到图片服务器上 然后再返回一个图片路径 然后把这个图片路径上传到业务接口中
handleAvatarSuccess(res){
    if(res.code==10000){ //这里根据接口返回的去判断
        //调用你的上传业务接口 
    }
},
errorFn(){
    this.$message.error('上传失败!')
},