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 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JS异步函数队列功能实例分析
Nov 28 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
php curl模拟post提交数据示例
2013/12/31 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python Celery定时任务的示例
2018/03/13 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
工作总结与自我评价
2014/09/18 职场文书
学校体育节班级口号
2015/12/25 职场文书