elementUI上传图片前判断图片的尺寸大小

  在上传图片前判断尺寸的大小,遇到了好多的坑。

1.没有注意到onload是异步加载,所以一定要在onload后在执行判断图片尺寸

2.upload内部需要一个promise,简单的return出false并没有什么用

3.完整代码:

beforeAvatarUpload(file) {

    const isSize = new Promise(function(resolve, reject) {
        let width = 100;
        let height = 100;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
            let valid = img.width >= width && img.height >= height;
            valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
    }).then(() => {
        return file;
    }, () => {
        this.$message.error(‘上传的icon必须是等于或大于100*100!‘);
        return Promise.reject();
    });
    return  isSize;
}

原文地址:https://www.cnblogs.com/yuzihong/p/10002508.html

时间: 2024-11-04 12:50:50

elementUI上传图片前判断图片的尺寸大小的相关文章

上传图片前浏览图片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus

【学习ios之路:UI系列】修改图片的尺寸大小操作

1.在添加图片操作时,通过UIImage对象进行添加图片操作 1.[UIImage imageName:@"1.png"] 2.[UIImage imageWithContentsOfFile:@"1.png"] 注:ImageNamed和imageWithContentsOfFile的区别 imageNamed加载图片并缓存,并且把image缓存到内存里面,当图片较少并且会频繁的使用时用imageNamed; imageWithContentsOfFile是只显示

C# 上传图片前判断上传图片的宽和高

网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileUpload ID="fuTx" runat="server" CssClass="uploadFile" /> cs后台代码: System.Drawing.Image upimage = System.Drawing.Image.FromSt

关于angularjs input上传图片前获取图片的Size 浅析

首先我们需要一个指令来追踪input的change.ngChage不适用input[file]. app.directive("fileread", [function () { return { scope: { selectedFile: "=", changed: '&' }, link: function(scope, element, attributes) { element.bind("change", function(c

Android选择/拍照 剪裁 base64/16进制/byte上传图片+PHP接收图片

转载请注明出处:http://blog.csdn.net/iwanghang/article/details/65633129觉得博文有用,请点赞,请评论,请关注,谢谢!~ 老规矩,先上GIF动态图,看个效果,如果符合你的项目或者确定你要了解的内容,再往下看吧: 完整项目下载地址:http://download.csdn.net/detail/iwanghang/9792768 贴代码: 1.PHP: <?php namespace app\index\controller; class Upl

通过input上传图片,判断不同浏览器及图片类型和大小的js代码

1.jsp页面代码 [html] view plain copy <form id="userPhoto" name="userPhoto" method="post" action="../uploadUserPhoto" enctype="multipart/form-data"> <input type="hidden" id="max_PhotoSiz

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE

用Python更改图片尺寸大小

1.PIL包推荐Pillow. 2.源码: #encoding=utf-8 #author: walker #date: 2014-05-15 #function: 更改图片尺寸大小 import os import os.path from PIL import Image ''' filein: 输入图片 fileout: 输出图片 width: 输出图片宽度 height:输出图片高度 type:输出图片类型(png, gif, jpeg...) ''' def ResizeImage(f

png图片尺寸大小调整

Android 开发中经常遇到各种hdpi,xhdpi,xxhdpi....很多尺寸大小的png图片要求. 网上也有不少工具,今天我又发现一款在线转换大小的网站,用了一下,一个png 114X114 转换成 16X16和512X512效果还可以; 连接在这里,希望需要的mark一下,么么 png工具类网站:http://images.my-addr.com/resize_png_online_tool-free_png_resizer_for_web.php