美文网首页
iview 上传图片 限制图片比例

iview 上传图片 限制图片比例

作者: 他大舅啊 | 来源:发表于2019-08-01 18:19 被阅读0次
// 上传图片限制  图片比例为 1 :1    3 : 2  
        checkImageWH(file) {
            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(this.width == this.height || self.GetPercent(this.width, this.height) == 1.5){
                            resolve();
                        }else{
                            self.$Notice.error({
                                title: "请上传图片的尺寸比例为1:1 或者3:2",
                            });
                            reject();
                        }
                    };
                    image.onerror = reject;
                    image.src = src;
                };
                filereader.readAsDataURL(file);
            })
        },

        GetPercent(num, total) {
            num = parseFloat(num);
                total = parseFloat(total);
                if (isNaN(num) || isNaN(total)) {
                    return "-";
            }
            return total <= 0 ? "0%" : (Math.round(num / total * 100) / 100.00);
        } 

使用

//图片上传前
detailBeforeUpload(file){
    return this.checkImageWH(file);
},

相关文章

  • iview 上传图片 限制图片比例

    使用

  • element upload图片上传尺寸限制

    图片比例限制 使用的是element的图片上传功能,需要对图片 比例 和 尺寸 进行校验. 封装以下方法. 使用

  • 图片按照宽高比排序

    由于图片上传的时候没有限制比例, 结果导致页面输出效果是这样的, 要是裁切图片, 图片显示不全, 要是强制输出, ...

  • iview readme.md

    iView Admin [站外图片上传中...(image-bfaeea-1552442446126)][站外图片...

  • iview图片上传

    【注】由于很久没碰过前端了,以后也不怎么想在这方向研究,当初很多实现细节基本已经忘光了。此篇文章仅供大家参考! 之...

  • element-ui上传图片限制图片比例

    在utils里新建imageRatio.js naturalWidth 支持ie9及以上我用img.width获取...

  • nginx 限制上传文件图片大小

    限制上传图片设置

  • iOS设置图片最大尺寸不压缩

    遇到类似上传头像、社交分享等操作的时候,需要对图片进行裁切,一般需要限制一个最大值,来限制图片既要维持宽高比例,又...

  • iOS设置图片最大尺寸

    遇到类似上传头像、社交分享等操作的时候,需要对图片进行裁切,一般需要限制一个最大值,来限制图片既要维持宽高比例,又...

  • 图片上传限制?

    前几天遇到了一个问题,就是自己找的图上传不了,我问过朋友,她说没问到这个问题。 就是我上传图片,它会提示一串英文,...

网友评论

      本文标题:iview 上传图片 限制图片比例

      本文链接:https://www.haomeiwen.com/subject/pficdctx.html