单击按钮下载图像数组

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) 中执行它，然后您可以从浏览器下载它。