vue elementui 上传图片限制格式、大小和尺寸

需求：

上传图片的格式为：.jpg、.jpeg、.png

大小为：1M以内

尺寸为：400*400

代码实现：

直接拿的elementui官网的html代码，加了一句：accept="image/jpg,image/jpeg,image/png"

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/"accept="image/jpg,image/jpeg,image/png":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

下面是写在methods里的js代码：

// 限制图片尺寸limitFileWH(E_width, E_height, file) {const _this = thislet imgWidth = ''let imgHight = ''const isSize = new Promise(function(resolve, reject) {const width = E_widthconst height = E_heightconst _URL = window.URL || window.webkitURLconst img = new Image()img.onload = function() {imgWidth = img.widthimgHight = img.heightconst valid = img.width === width && img.height === heightvalid ? resolve() : reject()}img.src = _URL.createObjectURL(file)}).then(() => {return true}, () => {_this.$message.warning({message: '上传图片的尺寸应为' + E_width + '*' + E_height + '，当前上传图片的尺寸为：' + imgWidth + '*' + imgHight,btn: false})return false})return isSize},// 图片上传之前的判断handleBeforeUpload(file) {return new Promise((resolve, reject) => {const suffix = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'const isLt1M = file.size / 1024 / 1024 < 1if (!suffix) {this.$message.error('只能上传图片！')return reject(false)}if (!isLt1M) {this.$message.error('上传图片大小不能超过 1MB!')return reject(false)}// 调用[限制图片尺寸]函数this.limitFileWH(400, 400, file).then((res) => {file.isFlag = resif (file.isFlag) {return resolve(true)} else {return reject(false)}})})},
// 上传成功的回调handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},

上传的图片不符合需求的会提示错误信息，停止上传。

vue elementui 上传图片限制格式、大小和尺寸相关推荐

Vue elementui 上传前获取图片宽度尺寸和大小
Vue elementui 上传前获取图片宽度尺寸和大小项目中用到elementui上传组件,但是on-change钩子函数中file参数只能拿到文件名字和大小, 如果是图片就拿不到图片的宽高,不符 ...
vue+elementUI上传图片
vue+elementUI上传图片笔记总结有裁剪框上传图片组件: <template slot="iconForm"><el-uploadclass=&quo ...
前端vue+element-ui上传图片至七牛，并返回外链URL至后台
前端vue+element-ui上传图片至七牛,并返回外链URL至后台上传文件到七牛云代码 2019/08/12 上传文件到七牛云注册登陆到七牛云,需要认证信息才能创建个人存储空间; 注册等步骤 ...
Vue+Element-UI 上传图片，打开相机，相册
Vue+Element-UI 上传图片,打开相机,相册 Element-UI中提供的Upload组件,是用来上传文件用的,并没有单独的纯用来上传图片的组件,所以,在部分浏览器(手机)中,打开后会发现是 ...
Vue Element-ui上传图片踩坑
Element-ui上传图片踩坑使用Element-ui组件上传图片时,使用自带的action发起上传请求时碰到400错误错误代码 <el-uploadclass="upload- ...
Element UI upload 上传图片校验格式 || 大小 || 比例
beforeAvatarUpload(file) {// 校验图片格式(也可直接用 accept 属性限制如:accept="image/png,image/jpg,image/jpeg,i ...
5分钟学会js上传图片校验图片格式、大小、尺寸宽高
js上传图片校验图片格式.大小.尺寸宽高一.前言 js上传图片校验图片格式.大小.尺寸宽高. 在此记录下,分享给大家. 二.代码 <input type=" ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
一般网站上传图片的大小是多少？网站图片上传格式大小建议附带简单修图方法
一般网站上传图片的大小是多少呢?尚网汇智给您列一下网站图片上传格式大小建议: 首先,上传图片格式: 通常图片以JPG图片居多,JPG格式的图片较小,图片也比较柔和不过特殊情况就要用特殊格式的图片了 ...

vue elementui 上传图片限制格式、大小和尺寸

需求：

代码实现：

vue elementui 上传图片限制格式、大小和尺寸相关推荐

最新文章

热门文章