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

2024-04-07 17:14:16

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组件实现图片预览效果方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue.js 实现图片本地预览裁剪压缩上传功能

以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &
vue.js实现的幻灯片功能示例

本文实例讲述了vue.js实现的幻灯片功能.分享给大家供大家参考,具体如下: 1.在父组件中 <slide-show :slides="slides"></slide-show> import SlideShow from '@/components/SlideShow' export default { components: { SlideShow, }, 2.在slideshow.vue中 <template> <div class=&q
基于vue.js实现图片轮播效果

轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
基于Vue的移动端图片裁剪组件功能

最近项目上要做一个车牌识别的功能.本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有20-40%.因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率.刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下. Demo地址:https://vivialex.github.io/demo/imageClipper/index.html 下载地址:https://git
利用vueJs实现图片轮播实例代码

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录以下只贴出carousel.vue代码,其他的省略 <template> <div ref="root"> <div class="sliderPanel"> <div v-for="(item,index) in imgArray" class="verticalCenter picbox">
VUE开发一个图片轮播的组件示例代码

本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide
利用Vue实现移动端图片轮播组件的方法实例

前言轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点支持自动播放 & 无限轮播 (loop) 效果支持用户滑
vue实现点击图片放大效果

本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下 1.建立子组件,来实现图片方法功能: BigImg.vue <template>  <transition name="fade"> <div class="img-view" @click="bigImg">  <div class="img
使用Vue制作图片轮播组件思路详解

之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作这个组件之前,笔者google了不少关于轮播的文章,发现实现一个轮播的思路虽然各有不同,但是大的逻辑其实差不多,本文主要依据慕课网上焦点轮播图特效这节课,不过慕课网主要用原生JS写,而笔者则用Vue进行了重构,并且进行了一点修改.完成后的组件
Vue封装Swiper实现图片轮播效果

图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

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

相关推荐

随机推荐