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

需求:

用户可上传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 方法即可。

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

(0)

相关推荐

  • vue检测对象和数组的变化分析

    在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态.可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化. 检测对象变化 1.不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化 但data111.b = 2:和vm.b = 2这个不能检测到变化 需要用 Vue.set(o

  • 关于vue的语法规则检测报错问题的解决

    搭建了一个vue项目,在配置路有的时候,陆续出现了各种报错其中最多的是一些写法,例如空格,缩进,各种括号,结果我一句一句对照,修改相当之费时间,效率低,一上午,一个路由配置都没写好 主要报错如下: 截取了一段常见报错,选取其中一个: Expected indentation of 4 spaces but found 1 tab 翻译一下,意思是:预期缩进4个空格,但找到1个选项卡.意思是vue在检测写法规则的时候,只认空格,不认tab的缩进,这时你就要修改的页面内容,把tab换成空格,这样就比

  • vue中遇到的坑之变化检测问题(数组相关)

    最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践.查文档的方式解决了,这里做一个总结. 例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.

  • vue源码中的检测方法的实现

    判断是否为undefined或null const isDef = (v) => { return v !== undefined && v !== null } 判断是否为Promise 函数 const isPromise = (val) => { return ( val !== undefine && typeof val.then === 'function' && typeof val.catch === 'function' ) }

  • vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

  • 浅谈Vue为什么不能检测数组变动

    问题来源:https://segmentfault.com/q/1010000015780995 问题描述:Vue检测数据的变动是通过Object.defineProperty实现的,所以无法监听数组的添加操作是可以理解的,因为是在构造函数中就已经为所有属性做了这个检测绑定操作. 但是官方的原文:由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • Vue不能检测到Object/Array更新的情况的解决

    前言 看文档不认真,开发也没有多注意,总是hack.忽悠忽悠就过去,但怎么说,歪门邪道还是不太好,现在就亡羊补牢,总结总结. 数组 索引 使用下标更新数组元素: 使用赋值方式改变数组长度: 使用下标增删数组元素: 正文 使用下标更新数组元素 data: { arrs: [0, 1, 2, 3] } 直接使用this.arrs[0] = 'zero';虽然数组确实是被更新了,但是更新不会被渲染到视图(html页面)上.因为Vue没有检测到数组的更新. 由于 JavaScript 的限制,Vue 不

  • vue将对象新增的属性添加到检测序列的方法

    vue中将对象中新增的属性增加到检测序列中 deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1 var key, i if (o2 instanceof Array) { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set(o1, i, []) this.deepCopy(o1[i], o2[i]) } else if (o2[i] instanceof Object) {

  • 解决Vue不能检测数组或对象变动的问题

    来看一个实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> <style> li:hover

随机推荐