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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 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新手上路(十一)
2006/10/09 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
js+canvas实现画板功能
2020/09/13 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python批量下载抖音视频
2019/06/17 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python使用建议技巧分享(三)
2020/08/18 Python
基于Python正确读取资源文件
2020/09/14 Python
代理班主任的自我评价
2014/02/04 职场文书
相亲活动方案
2014/08/26 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
客户答谢会致辞
2015/07/30 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python