Vue implementiert das Hinzufügen, Anzeigen und Löschen mehrerer Bilder

<Vorlage>
 <div id="Originalität">
    <div class="ipt">Hauptbild:</div>
    <div Klasse="Bild">
     <div class="Hauptbild">
      <div class="iconfont icon-jia" @click="uploadPic('filed')"></div>
     </div>
     <!--Sie können dem Hauptbild mehrere Bilder hinzufügen-->
     <div id="img" v-for="(imgsrc,index) in imgsrcs">
      <img id="imgshow" :src="imgsrc">
      <div Klasse = "iconfont icon-cha" @click = "deleteMulPic(index)"</div>
     </div>
    </div>
    <input id="abgelegt" type="file" multiple="multiple" accept="image/*,application/pdf" style="display: none;" @change="changeMulPic()">
 
    
 </div>
</Vorlage>
 
<Skript>
 Standard exportieren {
  Name: "Originalität",
  Komponenten:
 
  },
  Daten() {
   zurückkehren {   
    Bilddateien: []
   }
  },
  Methoden: {
   Bild hochladen: Funktion (Wert) {
    document.getElementById(val).click();
   },
   ändereMulPic: function() {
    var Datei = $("#filed").get(0).files[0];
    $("#img").anzeigen();
    this.imgsrcs.push(window.URL.createObjectURL(Datei))
   },
   deleteMulPic: Funktion(Index) {
    dies.imgsrcs.splice(index, 1);
   }
  }
 }
</Skript>
 
<Stilbereich>
 
 .Hauptbild {
  schweben: links;
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: rgba(255, 255, 255, 1);
  Rahmenradius: 2px;
  Rand: 1px durchgezogen #E5E9F2;
 }
 
 .Bild {
  Mindesthöhe: 100px;
 }
 
 .Dateien {
  Anzeige: keine;
  schweben: links;
 }
 
 #img {
  Rand links: 20px;
  schweben: links;
  Breite: 100px;
  Höhe: 100px;
  Rahmenradius: 2px;
  Rand: 1px durchgezogen #E5E9F2;
 }
 
 .icon-cha {
  Cursor: Zeiger;
  Position: absolut;
  Breite: 10px;
  Höhe: 10px;
  Rand links: 85px;
  Rand oben: -100px;
  Farbe: #BFC5D1;
 }
 
 #Bildshow {
  Breite: 100px;
  Höhe: 100px;
 }
 
 .icon-jia {
  Textausrichtung: zentriert;
  Breite: 20px;
  Höhe: 20px;
  Zeilenhöhe: 20px;
  Farbe: #BFC5D1;
  Polsterung: 40px;
  Cursor: Zeiger;
 }
 
</Stil>