2017-05-04 5 views
2

ich einen sehr einfachen HTML-Block haben, der eine button hat zum Download:herunterladen Anordnung von Bildern auf einen Klick

<div id="getImageWrapper"> 
    <div class="image"> 
     <p class="image-name">{{imageName}}</p> 
     <button class="download-btn" @click="getImage">Download image/s</button> 
    </div> 
</div> 

Die getImage() Funktion des Download-Button holt ein Array von Bildliste von dem Server .

getImage() { 
    const getImagesUrl = this.$store.state.website + '/api/get-requested-user-Images/'; 
    this.$http.get(getImagesUrl) 
     .then(function (response) { 
      console.log(response.data); 
     }) 
     .catch(function (response) { 
      console.log(response); 
     }); 
}  

Antwortdaten vom Server etwa wie folgt aussieht:

[ 
    { 
    "image": "/media/1492960503_66.jpeg" 
    }, 
    { 
    "image": "/media/1492963100_0.jpeg" 
    } 
] 

Mein Problem ist das, was als nächstes zu tun, so dass diese Anordnung von Bildern in dem Gerät des Benutzers (nicht als eine einzige ZIP-Datei heruntergeladen , aber als separate Einzelbilddateien), die in den meisten Browsern funktionieren würden? Wenn es hilft, bin ich Django als Backend und Vuejs für die Front-End verwendet wird.

+0

Mögliche Duplikat [Download mehrere Bilder auf einmal mit Javascript] (http://stackoverflow.com/questions/19830088/download-multiple-images-at-once-with-javascript) – Archer

Antwort

1

Sie können nicht alle Bilder in JavaScript zip. Für Zippen von Dateien, sollten Sie es in Ihrem Backend (see post for zipping on fly) tun und dann können Sie es aus dem Browser heruntergeladen werden.

Verwandte Themen