FileReader获取上传图片的宽高

<el-upload ?????????????????drag ?????????????????:action="/upload" ?????????????????accept="image/png, image/jpeg, image/gif, image/jpg" ?????????????????:headers="headers" ?????????????????:on-success ="successUploads" ?????????????????:before-upload ="uploadyanzheng" ?????????????????name="image" ?????????????????multiple> ?????????????????<i class="el-icon-upload"></i> ?????????????????<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> ?</el-upload>

 uploadyanzheng(file) { ?????let _this = this ???//普通的判断可以用return false ?????// 获取文件尺寸，判断尺寸在不在规定范围之内 ?????return new Promise(function(resolve, reject) { ???????let reader = new FileReader() ???????reader.readAsDataURL(file) ???????reader.onload = function(theFile) { ?????????let image = new Image() ?????????image.src = theFile.target.result ?????????image.onload = function() { ???????????let csize = `${this.width}*${this.height}` ???????????if (!_this.creativeSize.includes(csize)) {//this.creativeSize是可以上传的尺寸列表数组 ?????????????_this.$message.error(`${file.name}尺寸不对，请重新上传！`) ?????????????reject(‘图片尺寸不对‘) ???????????} else { ?????????????file.width = this.width ?????????????file.height = this.height ?????????????resolve(file) ???????????} ?????????} ???????} ?????}) ???},

<input type="file" size="20" autocomplete="off" id="upload_img" name="Uploadfile">var MyTest = document.getElementById("upload_img").files[0];var reader = new FileReader();reader.readAsDataURL(MyTest);reader.onload = function(theFile) {　　var image = new Image(); ??image.src = theFile.target.result; ??image.onload = function() { ??　　alert("图片的宽度为"+this.width+",长度为"+this.height); ??};};

<input type="file" id="input" multiple onchange="handleFiles(this.files)"> <div id="haorooms"></div>function handleFiles(files) { ?for (var i = 0; i < files.length; i++) { ???var file = files[i]; ???var imageType = /^image\//; ???if (!imageType.test(file.type)) { ?????continue; ???} ???var img = document.createElement("img"); ???img.classList.add("obj"); ???img.file = file; ??$("#haorooms").appendChild(img); // 把上传的图片添加到展示的div中 ???var reader = new FileReader(); ???reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); ???reader.readAsDataURL(file); ?}}

<div id="preview"></div><p id="log"></p>

document.addEventListener(‘paste‘, function (event) { ???var items = (event.clipboardData || window.clipboardData).items; ???var file = null; ???if (items && items.length) { ???????// 搜索剪切板items ???????for (var i = 0; i < items.length; i++) { ???????????if (items[i].type.indexOf(‘image‘) !== -1) { ???????????????file = items[i].getAsFile(); ???????????????break; ???????????} ???????} ???} else { ???????log.innerHTML = ‘<span style="color:red;">当前浏览器不支持</span>‘; ???????return; ???} ???if (!file) { ???????log.innerHTML = ‘<span style="color:red;">粘贴内容非图片</span>‘; ???????return; ???} ???// 此时file就是我们的剪切板中的图片对象 ???// 如果需要预览，可以执行下面代码 ???var reader = new FileReader() ???reader.onload = function(event) { ???????preview.innerHTML = ‘<img src="‘ + event.target.result + ‘" class="upload-image">‘; ???} ???reader.readAsDataURL(file); ???// 如果不需要预览，上面这段可以忽略 ???// 这里是上传 ???var xhr = new XMLHttpRequest(); ???// 上传进度 ???if (xhr.upload) { ???????xhr.upload.addEventListener(‘progress‘, function (event) { ???????????log.innerHTML = ‘正在上传，进度：‘ + Math.round(100 * event.loaded / event.total) / 100 + ‘%‘; ???????}, false); ???} ???// 上传结束 ???xhr.onload = function () { ???????var responseText = xhr.responseText; ???????log.innerHTML = ‘上传成功，地址是：‘ + responseText; ???}; ???xhr.onerror = function () { ???????log.innerHTML = ‘<span style="color:red;">网络异常，上传失败</span>‘; ???}; ???xhr.open(‘POST‘, ‘./upload.php‘, true); ???xhr.setRequestHeader(‘FILENAME‘, encodeURIComponent(file.name)); ???xhr.send(file);});