javascript - 单击按钮即可下载图像数组

Question

我有一个非常基本的 html block ，其中有一个要下载的 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 ) 执行此操作，然后可以从浏览器下载它。