基于iview upload组件的上传图片

最近由于开发需求，使用iview的Upload组件实现上传图片，但在开发过程中遇到了一个很困扰的问题：由于图片是延缓加载的，执行的过程其实是图片已经上传之后才会去调用检测图片大小的方法，没有达到预期的目的，官方文档显示before-upload可以返回false或者Promise来阻止事件，以下为Promise方法，欢迎提供false方法。

前端代码：

<Upload
     ref="upload"
     :show-upload-list="false"
     :before-upload="handleBeforeUpload"
     :on-success="handleSuccess"
     :on-error="handleError"
     :format="['jpg','jpeg','png']"
     :max-size="50"
     :on-format-error="handleFormatError"
     :on-exceeded-size="handleMaxSize"                                                             
     action="/platform/fastdfs/uploadfastdfspic/v1.3"
     style="display: inline-block;width:82px;">
     <div style="width: 82px;height:82px;line-height: 82px;text-align:center;">                                                                    
         <img :src="item.icon" alt="" v-if="item.icon" class="imgItem">
         <Icon type="camera" size="20" v-else></Icon>
     </div>
</Upload>

JS代码

 // 准备上传
    handleBeforeUpload (file) {
        const that =this;
         return util.checkImageWH(file, 46, 46,function(){
            that.$Notice.warning({
                title: '文件尺寸限制',
                desc: '文件大小不超过46*46像素.'
            });
         });
    },
 // 上传时
    handleProgress(event,file){
        this.$Notice.info({
            title: '文件正在上传',
            desc: '文件 ' + file.name + ' 正在上传。'
        });
    },
 // 上传图片
    handleSuccess (res,file) {
        var index= this.changeBtnImg;
        this.resultAllConf.buttonConfList[index].icon = res.data;
        // this.$refs.editbtn.children[index].children[0].src = res.data;
        this.$Notice.success({
            title: '文件上传成功',
            desc: '文件 ' + file.name + ' 上传成功。'
        });
    },
    // 上传失败
    handleError (event, file) {
        this.$Notice.error({
            title: '文件上传失败',
            desc: '文件 ' + file.name + ' 上传失败。'
        });
    },
    handleRemove (index) {
        // 从 upload 实例删除数据
        this.changeBtnImg = index;
    },
    handleFormatError (file) {
        this.$Notice.warning({
            title: 'The file format is incorrect',
            desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
        });
    },
    handleMaxSize (file) {
        this.$Notice.warning({
            title: '文件大小限制',
            desc: '文件大小不超过50KB.'
        });
    },

接下来是最关键的限制大小的方法：

util.checkImageWH = function(file, width, height,fn) {
    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) {
                    fn()
                    reject();
                } else if (height && this.height > height) {
                   fn()
                    reject();
                } else {
                    resolve();
                }
            };
            image.onerror = reject;
            image.src = src;
        };
        filereader.readAsDataURL(file);
    });
};