vue2.0 使用element-ui里的upload组件实现图片预览效果方法


Posted in Javascript onSeptember 04, 2018

1、首先我们在cli中引入element-ui

2、然后在具体的代码中放入uoload组件

<el-upload class="upload-demo" action="" :auto-upload='false' :on-change='changeUpload'>
 <el-button size="small" type="primary">点击上传</el-button>
 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

3、使用element-ui的upload组件中提供的接口:on-change回调函数,然后在回调函数中写入如下代码:

changeUpload: function(file, fileList) {
 this.fileList = fileList;
 this.$nextTick(
  () => {
  let upload_list_li = document.getElementsByClassName('el-upload-list')[0].children;
  for (let i = 0; i < upload_list_li.length; i++) {
  let li_a = upload_list_li[i];
  let imgElement = document.createElement("img");
  imgElement.setAttribute('src', fileList[i].url);
  imgElement.setAttribute('style', "max-width:50%;padding-left:25%");
  if (li_a.lastElementChild.nodeName !== 'IMG') { 
  li_a.appendChild(imgElement);
  } 
  }
  });
 }

这个代码的主要意思就是:当这个回调函数执行,我们就获取到组件自添加的元素el-upload-list的子元素,然后遍历子元素,给组件自添加的元素自添加的元素el-upload-list的子元素a添加我们自己使用JS创建的一个imgElement,这样我们就可以看到我们的图片显示在组件的下方了,虽然有点丑,但是没关系,我们为imgElement添加上css样式不就行了嘛!

以上这篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
JavaScript 学习技巧
Feb 17 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 #Javascript
element UI upload组件上传附件格式限制方法
Sep 04 #Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 #Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 #Javascript
JS获取并处理php数组的方法实例分析
Sep 04 #Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 #Javascript
vue form 表单提交后刷新页面的方法
Sep 04 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
我的论坛源代码(三)
2006/10/09 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
Javascript浅谈之this
2013/12/17 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python AES加密实例解析
2018/01/18 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python按比例随机切分数据的实现
2019/07/11 Python
python argparser的具体使用
2019/11/10 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
促销活动计划书
2014/05/02 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
新郎接新娘保证书
2015/05/08 职场文书
大学军训通讯稿
2015/07/18 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python