vue圖片上傳本地預覽組件使用詳解

這篇文章主要爲大家詳細介紹了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。