上传图片尺寸大小限制（iviewUI组件库为例）

上传图片尺寸大小限制，UI组件库为例

iview中

可以在before-upload中使用 new FileReader() 读取文件 和 new Image() 建立图像对象 来判断控制图片尺寸

handleBeforeUpload(file){
            return this.checkImageWH(file);
        },
        // 上传图片限制  图片比例为 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.$Message.warning("请上传图片的尺寸比例为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);
        },

 

 

FileReader()

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

 

调用FileReader对象的方法

方法名                       参数                       描述
abort                          none                      中断读取
readAsBinaryString   file                          将文件读取为二进制码
readAsDataURL        file                          将文件读取为 DataURL
readAsText                file, [encoding]       将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

处理事件
事件              描述
onabort        中断时触发
onerror        出错时触发
onload         文件读取成功完成时触发
onloadend   读取完成触发，无论成功或失败
onloadstart  读取开始时触发
onprogress  读取中

 

示例：

function printFile(file) {
  var reader = new FileReader();
  reader.onload = function(evt) {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}

 

Image()

new Image() 这样做就相当于给浏览器缓存了一张图片。

Image()函数将会创建一个新的HTMLImageElement实例。

它的功能等价于 document.createElement('img')

语法：Image(width, height)

参数：

width  图片的宽度 (即 width 属性).

height  图片的高度 (即 height 属性).

需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错

示例：

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

上面的代码相当于在 中定义了下面的HTML: