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刷新父页面的各种方法汇总
Sep 03 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
导游带团欢迎词
2015/09/30 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang