上传图片-限制尺寸大小

1.图片upload之前做监听,>-- before-upload

handleBeforeUpload:上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
这里会用到Promise ,及同步异步问题。

      async xzhandleUpload(file) {
          // 有大小限制
            var isImage = false;
            await this.checkImageWH(file,this.whSize).then(params => {
                isImage = params;
            });
            if (!isImage) {
                return;
            } 
            // 图片验证通过,下一步请求上传图片
            this.handleUpload(file);
        },

checkImageWH--在这里就是进一步通过获取image的大小,判断上传的图片是否符合规定。

    async checkImageWH(file) {
            return new Promise((resolve, reject)=> {
                let _this = this;
                let filereader = new FileReader();
                filereader.onload = (e) => {
                    let src = e.target.result;
                    const image = new Image();
                    image.onload = (e) => {
                       // w 、h设置的限制参数
                        if (image.width == w && image.height == h) {
                            resolve(true);
                        } else {
                            _this.$Notice.warning({
                                title: '图片尺寸为'+ this.whSize
                            })
                            reject(false);
                        }
                    };
                    image.onerror = reject;
                    image.src = src;
                };
                filereader.readAsDataURL(file);
            }).catch((e) => {});
        },


 

你可能感兴趣的:(javascript)