Vue如何實(shí)現(xiàn)多圖添加顯示和刪除

這篇文章給大家分享的是有關(guān)Vue如何實(shí)現(xiàn)多圖添加顯示和刪除的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

效果圖：

首先給一個(gè)input[type="file"]，然后隱藏掉，當(dāng)點(diǎn)擊加號(hào)所在的區(qū)域時(shí)，觸發(fā)文件選擇的點(diǎn)擊事件。

注意：取src的值時(shí)用v-bind:src="imgsrc";用src="imgsrc"或者src="{{imgsrc}}"會(huì)報(bào)錯(cuò)。

代碼：（有些樣式省略，主要是添加和刪除方法）

<template>
 <div id="originality">
    <div class="ipt">主圖：</div>
    <div class="picture">
     <div class="Mainpicture">
      <div class="iconfont icon-jia" @click="uploadPic('filed')"></div>
     </div>
     <!--主圖可以添加多個(gè)圖片-->
     <div id="img" v-for="(imgsrc,index) in imgsrcs">
      <img id="imgshow" :src="imgsrc">
      <div class="iconfont icon-cha" @click="deleteMulPic(index)"</div>
     </div>
    </div>
    <input id="filed" type="file" multiple="multiple" accept="image/*,application/pdf"  @change="changeMulPic()">
 
    
 </div>
</template>
 
<script>
 export default {
  name: "originality",
  components: {
 
  },
  data() {
   return {   
    imgsrcs: []
   }
  },
  methods: {
   uploadPic: function(val) {
    document.getElementById(val).click();
   },
   changeMulPic: function() {
    var file = $("#filed").get(0).files[0];
    $("#img").show();
    this.imgsrcs.push(window.URL.createObjectURL(file))
   },
   deleteMulPic: function(index) {
    this.imgsrcs.splice(index, 1);
   }
  }
 }
</script>
 
<style scoped>
 
 .Mainpicture {
  float: left;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  border: 1px solid #E5E9F2;
 }
 
 .picture {
  min-height: 100px;
 }
 
 .files {
  display: none;
  float: left;
 }
 
 #img {
  margin-left: 20px;
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 2px;
  border: 1px solid #E5E9F2;
 }
 
 .icon-cha {
  cursor: pointer;
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: 85px;
  margin-top: -100px;
  color: #BFC5D1;
 }
 
 #imgshow {
  width: 100px;
  height: 100px;
 }
 
 .icon-jia {
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #BFC5D1;
  padding: 40px;
  cursor: pointer;
 }
 
</style>

感謝各位的閱讀！關(guān)于“Vue如何實(shí)現(xiàn)多圖添加顯示和刪除”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！