element-ui upload组件上传图片时限制图片宽高
template部分代码,引入upload组件,这里采用自动上传文件
<div class="filesC"> <el-upload ref="files" name="imgFile" class="avatar-uploader" :with-credentials="true" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :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> 图片尺寸:141*54</div>
script部分代码,图片上传之前触发 beforeAvatarUpload ,在这里return false 会中断上传操作
beforeAvatarUpload (file) { let _this = this if (file.type.indexOf('image')<0) { this.$alert({message: '图片格式不正确', btn: false}) return false } const isLt2M = file.size / 1024 / 1024 < 2; const isSize = new Promise(function(resolve, reject) { let width = 141; let height = 54; let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = function() { let valid = img.width == width && img.height == height; valid ? resolve() : reject(); } img.src = _URL.createObjectURL(file); }).then(() => { return file; }, () => { _this.$alert({message: '上传的icon必须是等于141*54!', btn: false}) return Promise.reject(); }); return isSize},handleAvatarSuccess (res, file) { if (res.state==200) { this.imageUrl = URL.createObjectURL(file.raw);//从文件中读取的本地文件路径,用于显示在img标签里 this.fileUrl = res.data//上传成功后,后台给返回的图片线上路径 }else{ this.$alert({message: '上传失败', btn: false}) } },handleAvatarError (res, file) { this.$alert({message: '选择图片失败', btn: false}) /*this.imageUrl = URL.createObjectURL(file.raw);*/},
css代码,修改原组件的样式
.filesC .avatar-uploader .el-upload { border: 1px solid #aaa; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;}.filesC .avatar-uploader .el-upload:hover { border-color: #409EFF;}.filesC .avatar-uploader-icon { font-size: 20px; color: #8c939d; width: 141px; height: 54px; line-height: 54px; text-align: center; background: white;}.filesC .avatar { width: 141px; height: 54px; display: block;}
转载于:https://www.cnblogs.com/fairy62/p/9680361.html
element-ui upload组件上传图片时限制图片宽高相关推荐
- element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
- element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- Element UI upload 上传图片校验格式 || 大小 || 比例
beforeAvatarUpload(file) {// 校验图片格式(也可直接用 accept 属性限制如:accept="image/png,image/jpg,image/jpeg,i ...
- 响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码 懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
- element中upload组件中的确认删除问题
element中upload组件中的确认删除问题 问题原因 <el-uploadclass="upload-demo"dragaction="https://jso ...
- Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
- element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
- 实战 | Element UI 父子组件传值与事件绑定(逆向)
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...
最新文章
- 区块链经济时代得“先机”者得天下!
- 开源前后端分离在线考试系统
- Python正则表达式,简单20个用例学习
- win10浏览器_Win10系统中ie浏览器的证书错误应该如何解决?
- win7系统图标太大的缩小教程
- 商城小程序源码开源版-可二开
- Celery+Rabbitmq实现异步任务
- WCF开发框架形成之旅--个人图片信息的上传保存
- Windows Terminal 窗口/控制台切换快捷键总结
- 状态码为200 java 类
- 统一资源定位符(URL)介绍
- PRML 十大经典机器学习算法
- html/css表单美化
- MISRA C_2012规则翻译、解读、示例
- 斗地主+三人+叫地主+作弊(可设置)+积分属性+记牌器(可设置)
- Android强大的控件——RecyclerView
- 南航里程每年清空吗_速度用!南航里程即将大量贬值!还有每年3张南航处卡!...
- 在远程linux服务器上用wget命令下载nuscenes数据集出现HTTP request sent, awaiting response... 403 Forbidden错误
- 海淘thinkpad-t460p攻略
- 基于北向资金指数择时策略验证与思考