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闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
Javascript实现字数统计
Jul 03 Javascript
js实现div在页面拖动效果
May 04 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
javascript History对象原理解析
Feb 17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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语法速查表
2006/12/06 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
js 颜色选择插件
2017/01/23 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
token 机制和实现方式
2020/12/15 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
波兰购物网站:MALL.PL
2019/05/01 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
法制宣传实施方案
2014/03/13 职场文书
信息工作经验交流材料
2014/05/28 职场文书
借条如何写
2015/05/26 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python