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

最近项目一直在使用vue，以前只是用vue做过一些简单的demo对数据进行增删改，并没有用于实际开发项目。今天就想了解一下如何用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。