需求:

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

vue : 检测用户上传的图片的宽高的更多相关文章

  1. AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)

    文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...

  2. vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  3. BBS(第三天) 如何吧用户上传的图片文件保存到本地

    1. 将用户上传的所有静态文件统一管理 -- settings.py -- MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2. 服务器会对外公开一下服务器静 ...

  4. elementUI 图片上传限制上传图片的宽高

    文件上传,需当上传的文件类型为图片的时候,需要限制图片的宽高. 此处采用了new Promise异步加载的方式,等图片上传加载完成后, 页面代码: <el-form-item label=&qu ...

  5. vue element-ui 组件上传图片 以及对 图片的 宽高 和 大小 格式等 做出限制

    vue  文件: 自行引用 elemen-ui    <el-upload                         action=" 让后端给你上传地址 "      ...

  6. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  7. MVC应用程序显示上传的图片

    MVC应用程序显示上传的图片 前两篇<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html和<MVC应用程序实现上传文件 ...

  8. Django项目实战之用户上传与访问

    1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)

    需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...

随机推荐

  1. 上位机面试必备——TCP通信灵魂二十问【上】

    关注公众号获取更多干货 TCP通信协议应该是上位机开发中应用最广泛的协议,无论是西门子S7协议.三菱MC协议或者是欧姆龙的Fins-TCP协议等,都是TCP通信协议的典型应用.很多人在上位机面试时,都 ...

  2. SpringCloud教程第6篇:config(F版本)

    一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ...

  3. ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

    Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...

  4. 写给.NET开发者的Python教程(一):引言

    距离上一篇博文已过去8个月了,这段时间发生了很多事情导致没能持续更新博客.这段时间除了工作繁忙,业余时间都投入到AI技术的学习中,后面一段时间将会给大家分享我作为一个.NET开发人员在深度学习领域学习 ...

  5. git和github入门指南(6)

    6.交作业的流程 以下内容是螺钉课堂在线就业班提交作业的要求,非螺钉课堂在线就业班学员不用学习 螺钉课堂作业全程采用git管理,希望在日常使用中,加深对git和github的理解 具体流程: 1.注册 ...

  6. 07 . Prometheus监控Memcached并配置Grafana

    List CentOS7.3 prometheus-2.2.1.linux-amd64.tar.gz redis_exporter-v0.30.0.linux-amd64.tar.gz ` 节点名 I ...

  7. 服务消费者(Feign-上)

    上一篇文章,讲述了Ribbon去做负载请求的服务消费者,本章讲述声明性REST客户端:Feign的简单使用方式 - Feign简介 Feign是一个声明式的Web服务客户端.这使得Web服务客户端的写 ...

  8. mysql 主键自增设置,插入数据就不必再设置了。

    (完)

  9. Java 从入门到进阶之路(二十九)

    在之前的文章我们已经可以对本地对文件和目录进行新建和删除等操作,接下来我们来对文件内对具体内容进行操作. 如下代码,我们实现了一个基本的文件写入: /** * java.io.RandomAccess ...

  10. 二进制小数和IEEE浮点标准

    二进制小数 首先复习进位计数制的要素: 数码:用来表示进制数的元素.比如 二进制数的数码为:0,1 十进制数的数码为:0,1,2,3,4,5,6,7,8,9 十六进制数的数码为:0,1,2,3,4,5 ...