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 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
Jquery获取radio选中的值
May 05 jQuery
React简单介绍
May 24 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
js数组的操作指南
2014/12/28 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
Python之web模板应用
2017/12/26 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
开学典礼主持词
2014/03/19 职场文书
数字化校园建设方案
2014/05/03 职场文书
端午节活动总结
2014/08/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫