vue 检测用户上传图片宽高的方法


Posted in Javascript onFebruary 06, 2020

需求:

用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素。

第一步,获取上传的图片的宽高。

初始化一个对象数组,宽高均设为0。

如果用户上传的图片没有上限,可以动态修改这个对象数组。

data:

picArray:[
  {
   width:0,
   height:0
  },
  {
   width:0,
   height:0
  },
  {
   width:0,
   height:0
  },
  {
   width:0,
   height:0
  },
  {
   width:0,
   height:0
  },
  {
   width:0,
   height:0
  }
  ],

HTML:

<myupload :keys="index" @getBase="getUpImg">
    
</myupload>

myupload是上传图片的组件,略。 

methods:

getUpImg(imgurl, keys){
  if(keys === 9){
  this.submitData.logo_img = imgurl
  this.logoImgCount = true
  } else {
  Vue.set(this.imgListArray,keys,imgurl)
  
  this.$nextTick(function(){
   let img = document.getElementById('picId' + keys)
   // console.log(img)
   let picArray = this.picArray
   img.onload = function () {
   console.log(keys)
   console.log(this.naturalWidth)
   console.log(this.naturalHeight)
   let o = {
    width: this.naturalWidth,
    height: this.naturalHeight
   }
   Vue.set(picArray,keys,o)
   console.log('picArray', picArray)
   }
  })
  }  
 },

关键的代码用红色标出了。

值得注意的是:获取宽高必须用 this.$nextTick ,里面再写 img.onload 。this.naturalWidth 是图片原本的宽高。此时 this 指的是当前图片对象。

 第二步,提交之前检验图片的宽高。

methods:

imageCheck(){
  let checkboolean = true
  let check = {
  'width': [[540],[0,540]],
  'height': [[330],[0,330]]
  }
  let f1 = function (num,index,type) {
  let n = num
  let i = index
  let t = type
  let b = false
  // console.log(n,i,t)
  for (let x = 0; x < check[type][i].length; x++) {
   if (check[type][i][x] === num) {
   // console.log('>>>>>>>>>>>>>' + check[type][i][x] + '===' + num + '>>>>>>>>>>>>>>>>' )
   b = true
   }   
  }
  return b
  }
  for (let i = 0; i < this.picArray.length; i++) {

  let cb = true

  for (let x in this.picArray[i]) {
   let number = this.picArray[i][x]
   // console.log(x,number)
   if (x === 'width' && i < 3) {
   checkboolean = f1(number, 0, 'width')
   if (!checkboolean) {
    // console.log('=================',i,x,number,'return false')
    cb = false
    break
   }
   } else if (x === 'width' && i >= 3) {
   checkboolean = f1(number, 1, 'width')
   if (!checkboolean) {
    // console.log('=================',i,x,number,'return false')
    cb = false
    break
   }
   } else if (x === 'height' && i < 3) {
   checkboolean = f1(number, 0, 'height')
   if (!checkboolean) {
    // console.log('=================',i,x,number,'return false')
    cb = false
    break
   }
   } else if (x === 'height' && i >= 3) {
   checkboolean = f1(number, 1, 'height')
   if (!checkboolean) {
    // console.log('=================',i,x,number,'return false')
    cb = false
    break
   }
   }
  }

  if (!cb) {
   break
  }
  }
  return checkboolean
 },


// sumbit function
...
  if(!this.imageCheck()){
  this.$message({
   message: this.MASSAGE_imagecheck,
   type: 'error'
  });
  return false
  }
  alert('可以传图')
...

$message 是elementUI的组件。

imageCheck 就是检验图片宽高用的方法。返回布尔值,false表示图片宽高不符合要求(或者没有传图)。

其中:

checkboolean 是最终要返回的布尔值。

check 是装载合法宽高值的对象。因为后3张图可传可不传,所以 width 和 height 都是二阶数组。数字是符合要求的值。

f1 是检验某一张图宽高的函数,传入宽高值、下标(第几张)、类型(width height),返回布尔值,false表示图片宽高不符合要求(或者没有传图)。

执行 imageCheck 方法的时候会直接执行循环,如果发现图片不符合要求就跳出并返回 false 给函数外。

里循环中的 x 代表类型,i 代表下标。

使用:在提交时执行 imageCheck 方法即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于Javascript作用域链的八点总结
Dec 06 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
vue中如何使用ztree
Feb 06 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
vue中对象数组去重的实现
Feb 06 #Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 #Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 #Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 #Javascript
JavaScript实现左右滚动电影画布
Feb 06 #Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 #Javascript
使用node.JS中的url模块解析URL信息
Feb 06 #Javascript
You might like
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python使用opencv读取图片的实例
2017/08/17 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python 元类实例解析
2018/04/04 Python
Python 加密与解密小结
2018/12/06 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python调用C语言的实现
2019/07/26 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
深入了解python列表(LIST)
2020/06/08 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Farnell德国:电子元器件供应商
2018/07/10 全球购物
2014年幼儿园老师工作总结
2014/12/05 职场文书
高三语文复习计划
2015/01/19 职场文书