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>       &nbsp;图片尺寸: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组件上传图片时限制图片宽高相关推荐

  1. element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。

    问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...

  2. element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组

    在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...

  3. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  4. Element UI upload 上传图片校验格式 || 大小 || 比例

    beforeAvatarUpload(file) {// 校验图片格式(也可直接用 accept 属性限制如:accept="image/png,image/jpg,image/jpeg,i ...

  5. 响应式滚动图懒加载 element ui el-carousel 组件优化代码

    响应式滚动图懒加载 element ui  el-carousel 组件优化代码 懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...

  6. element中upload组件中的确认删除问题

    element中upload组件中的确认删除问题 问题原因 <el-uploadclass="upload-demo"dragaction="https://jso ...

  7. Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性

    基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...

  8. element ui table组件扩展关于列表编辑按钮的位置放置

    最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...

  9. 实战 | Element UI 父子组件传值与事件绑定(逆向)

    这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...

最新文章

  1. 区块链经济时代得“先机”者得天下!
  2. 开源前后端分离在线考试系统
  3. Python正则表达式,简单20个用例学习
  4. win10浏览器_Win10系统中ie浏览器的证书错误应该如何解决?
  5. win7系统图标太大的缩小教程
  6. 商城小程序源码开源版-可二开
  7. Celery+Rabbitmq实现异步任务
  8. WCF开发框架形成之旅--个人图片信息的上传保存
  9. Windows Terminal 窗口/控制台切换快捷键总结
  10. 状态码为200 java 类
  11. 统一资源定位符(URL)介绍
  12. PRML 十大经典机器学习算法
  13. html/css表单美化
  14. MISRA C_2012规则翻译、解读、示例
  15. 斗地主+三人+叫地主+作弊(可设置)+积分属性+记牌器(可设置)
  16. Android强大的控件——RecyclerView
  17. 南航里程每年清空吗_速度用!南航里程即将大量贬值!还有每年3张南航处卡!...
  18. 在远程linux服务器上用wget命令下载nuscenes数据集出现HTTP request sent, awaiting response... 403 Forbidden错误
  19. 海淘thinkpad-t460p攻略
  20. 基于北向资金指数择时策略验证与思考

热门文章

  1. [20161229]linux下使用oclumon命令(rac)
  2. ExFat文件系统DBR受损恢复案例
  3. Visual Studio 编译任务压缩js和css文件
  4. Unity The Type Matching Rule
  5. MySQL binlog
  6. HDU 4411 Arrest(费用流)
  7. linux系统的sudo apt-get命令大全
  8. 求数组最大数,该数为数组中某两个数相加
  9. 使用CURL构建爬虫,抓取百度百科内容
  10. webservice 测试窗体只能用于来自本地计算机的请求