点击按钮

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