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中的几个运算符
Jun 29 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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 常用的header头部定义汇总
2015/06/19 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
utf8的编码算法 转载
2006/12/27 Javascript
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
greybox——不开新窗口看新的网页
2007/02/20 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python绘制3D图形
2018/05/03 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python3访问字典里的值实例方法
2020/11/18 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
清明节随笔
2015/08/15 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
linux中nohup和后台运行进程查看及终止
2021/06/24 Python