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

iview中

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

handleBeforeUpload(file){return this.checkImageWH(file);},// 上传图片限制 图片比例为 1 &＃xff1a;1 3 : 2 checkImageWH(file) {let self &＃61; this;return new Promise(function (resolve, reject) {let filereader &＃61; new FileReader();filereader.onload &＃61; e &＃61;> {let src &＃61; e.target.result;const image &＃61; new Image();image.onload &＃61; function () {if(this.width &＃61;&＃61; this.height || self.GetPercent(this.width, this.height) &＃61;&＃61; 1.5){resolve();}else{self.$Message.warning("请上传图片的尺寸比例为1:1 或者3:2");reject();}};image.onerror &＃61; reject;image.src &＃61; src;};filereader.readAsDataURL(file);})},GetPercent(num, total) {num &＃61; parseFloat(num);total &＃61; parseFloat(total);if (isNaN(num) || isNaN(total)) {return "-";}return total <&＃61; 0 ? "0%" : (Math.round(num / total * 100) / 100.00);},

FileReader()

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

调用FileReader对象的方法

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

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

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

示例&＃xff1a;

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

Image()

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

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

它的功能等价于 document.createElement(&＃39;img&＃39;)

语法&＃xff1a;Image(width, height)

参数&＃xff1a;

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

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

需要注意的是&＃xff1a;src 属性一定要写到 onload 的后面&＃xff0c;否则程序在 IE 中会出错

示例&＃xff1a;

var myImage &＃61; new Image(100, 200);
myImage.src &＃61; &＃39;picture.jpg&＃39;;
document.body.appendChild(myImage);

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