vue圖片上傳本地預(yù)覽組件使用詳解

<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實現(xiàn)預(yù)覽
  getImgBase(){
  var _this = this;
  var event = event || window.event;
  var file = event.target.files[0];
  var reader = new FileReader(); 
  //轉(zhuǎn)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>