Vue 上传前获取图片宽度尺寸和大小
参考资料:https://www.cnblogs.com/wyx-remove-love/p/wyx-20190626-1.html
https://blog.csdn.net/qq_22771739/article/details/87007191
废话不多说,直接上代码了
beforeAvatarUpload(file) {
const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 5 if (!isImg) {
this.$notify({
title: '失败',
message: '上传图片只能是 JPG/JPEG/PNG 格式!',
type: 'error',
duration: 3000
})
return false
}
if (!isLt2M) {
this.$notify({
title: '失败',
message: '上传图片大小不能超过 4MB!',
type: 'error',
duration: 3000
})
return false
} var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () { //让页面中的img标签的src指向读取的路径
var img = new Image()
img.src = reader.result
if (img.complete) {//如果存在浏览器缓存中
if (img.width > 540 || img.height > 300) {
this.$notify({
title: '失败',
message: '上传图片分辨率建议540*300,宽度不可超过540px,高度不超过300px!',
type: 'error',
duration: 3000
})
return false
} } else {
img.onload = function () {
if (img.width > 540 || img.height > 300) {
this.$notify({
title: '失败',
message: '上传图片分辨率建议540*300,宽度不可超过540px,高度不超过300px!',
type: 'error',
duration: 3000
})
return false
}
}
}
} return isImg && isLt2M
}
Vue 上传前获取图片宽度尺寸和大小的更多相关文章
- iOS之苹果调整 App Store 截图上传规则,截图尺寸、大小等
作者:ASO100链接:https://zhuanlan.zhihu.com/p/23041522来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 自从 8 月中旬苹果向 ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 利用canvas对上传图片进行上传前压缩
利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- [转帖]018 磁盘 IO 性能监控 / 压测工具 (sar、iotop、fio、iostat)
https://my.oschina.net/u/3113381/blog/5465063 1 sar 命令查看当前磁盘 IO 读写 sar(System Activity Reporter 系统 ...
- [转帖]Linux命令拾遗-%iowait指标代表了什么?
https://www.cnblogs.com/codelogs/p/16060759.html 简介# 一直以来,我都知道top.vmstat.mpstat中有一个叫wa(%iowait)的cpu指 ...
- Oracle TNS 异常问题处理
今天下午快下班时同事找我说自己的性能测试Oracle数据库 连不上了. 然后自己连上去简单看了一下. 因为已经是事后了, 所以没有截图,只通过文字说明. 环境说明:Win2012r2 + Oracle ...
- acme.sh的简单学习过程
acme.sh的简单学习过程 背景 公司内部测试环境为了节约费用(不要学我) 自己花十块到一百块之前从腾讯云购买一个域名 然后使用NDSPOD进行解析内网IP地址 偶尔需要申请临时证书进行HTTPS的 ...
- 我们开源了一个 Ant Design 的单元测试工具库
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:佳岚 欢迎大家点一个小小的 Star ant-design ...
- express学会CRUD
使用express 搭建项目 1==> express 项目名 -e 2==> 然后按照提示就可以了 cd 项目名 3==>进入项目 下载依赖 cnpm i 4==>启动项目 ...
- 2024-01-27:用go语言,阿里巴巴走进了装满宝藏的藏宝洞。藏宝洞里面有N堆金币, 第i堆金币的总重量和总价值分别是m[i]、v[i], 阿里巴巴有一个承重量为T的背包,但并不一定有办法将全部的
2024-01-27:用go语言,阿里巴巴走进了装满宝藏的藏宝洞.藏宝洞里面有N堆金币, 第i堆金币的总重量和总价值分别是m[i].v[i], 阿里巴巴有一个承重量为T的背包,但并不一定有办法将全部的 ...
- 6.1 C/C++ 封装字符串操作
C/C++语言是一种通用的编程语言,具有高效.灵活和可移植等特点.C语言主要用于系统编程,如操作系统.编译器.数据库等:C语言是C语言的扩展,增加了面向对象编程的特性,适用于大型软件系统.图形用户界面 ...
- yarn常用命令
1. 安装 npm install yarn -g 2. 设置淘宝镜像 yarn config set npmRegistryServer https://registry.npm.taobao.or ...
- conditional_t和enable_if_t的实现
conditional_t和enable_if_t是元编程里面很相似却有有着一定区别的模板.形如conditional_t<_Cond, _If, _Else>是指如果_Cond表达式 ...