vue图片上传本地预览组件使用详解


Posted in Javascript onFebruary 20, 2019

最近项目一直在使用vue,以前只是用vue做过一些简单的demo对数据进行增删改,并没有用于实际开发项目。今天就想了解一下如何用vue实现常见的图片上传前本地预览效果。

效果预览:

vue图片上传本地预览组件使用详解

<template>
 <div class="image-view">
 <div class="addbox">
  <input type="file" @change="getImgBase()">
  <div class="addbtn">+</div>
 </div>
 <div class="view">
  <div class="item" v-for="(item, index) in imgBase64">
  <span class="cancel-btn" @click="delImg(index)">x</span>
  <img :src="item">
  </div>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'imageView',
 data (){
  return {
  imgBase64:[] //存储img base64的值将值传给后端处理
  }
 },
 methods: {
  //获取图片base64实现预览
  getImgBase(){
  var _this = this;
  var event = event || window.event;
  var file = event.target.files[0];
  var reader = new FileReader(); 
  //转base64
  reader.onload = function(e) {
   _this.imgBase64.push(e.target.result);
  }
  reader.readAsDataURL(file);
  },
  //删除图片
  delImg(index){
  this.imgBase64.splice(index,1);
  }
 }
 }
</script>
<style scoped>
 *{margin:0 auto;padding:0;font-family:"微软雅黑";}
 .clearboth::after{
 content:"";
 display:block;
 clear:both;
 }
 .image-view{
 width:400px;
 height:300px;
 margin:50px auto;
 }
 .image-view .addbox{
 float:left;
 position:relative;
 height:100px;
 width:100px;
 margin-bottom:20px;
 text-align:center;
 }
 .image-view .addbox input{
 position:absolute;
 left:0;
 height:100px;
 width:100px;
 opacity:0;
 }
 .image-view .addbox .addbtn{
 float:left;
 height:100px;
 width:100px;
 line-height:100px;
 color:#fff;
 font-size:40px;
 background:#ccc;
 border-radius:10px;
 }
 .image-view .item {
 position:relative;
 float:left;
 height:100px;
 width:100px;
 margin:10px 10px 0 0;
 }
 .image-view .item .cancel-btn{
 position:absolute;
 right:0;
 top:0;
 display:block;
 width:20px;
 height:20px;
 color:#fff;
 line-height:20px;
 text-align:center;
 background:red;
 border-radius:10px;
 cursor:pointer;
 }
 .image-view .item img{
 width:100%;
 height:100%;
 }
 .image-view .view{
 clear:both;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 #Javascript
浅谈小程序 setData学问多
Feb 20 #Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 #Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 #Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 #Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 #Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 #Javascript
You might like
php 三维饼图的实现代码
2008/09/28 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Django实现表单验证
2018/09/08 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
我的动漫时代的创业计划书范文
2014/01/27 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
公司周年庆寄语
2019/06/21 职场文书
python入门之算法学习
2021/04/22 Python
详解Java实践之建造者模式
2021/06/18 Java/Android