下载阵列

Question

我有一个非常基本的HTML块，其中有一个button下载：

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

下载按钮的getImage()功能获取图像列表的数组从服务器。从服务器

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); 
     }); 
}  

响应数据看起来是这样的：

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

我的问题是这样，这个阵列图像被下载到用户的设备下一步做什么（而不是作为一个单独的压缩文件，但作为单独的单个图像文件），这将在大多数浏览器中工作？如果有帮助，我使用Django作为后端，Vuejs作为前端。

Answer 1

无法压缩JavaScript中的所有图像。对于压缩文件，您应该在后端执行（see post for zipping on fly），然后您可以从浏览器下载文件。