时间戳

首页 > 解决方案 > 如何使用 axios 下载包含多种类型文件的 zip

javascript - 如何使用 axios 下载包含多种类型文件的 zip

问题描述

在我的 vueJs 应用程序中，我有以下 axios POST api 调用，假设返回多个我希望保存在 .zip 文件夹中的文件。但是，当我使用以下 axios 方法时，我无法打开我的 zip，并且出现错误，提示“我的 folder.zip 无效”。

如何正确下载 response.data？

这是方法。我在原始调用正文中发送了一些需要的信息和一个需要上传的文件，以便我可以获取需要下载的其他文件。

upload() {
      console.log("uploading")
      let formData = new FormData();
      let gerarMenus = "on";
      let zipName= "test";
      let var1= "on";
      let var2= "on";
      let var3= "on";
      let var4= "on";
       this.files.forEach((f,x) => {
         formData.append('file'+(x+1), f);

       });
       formData.append('zipName', zipName);
         formData.append('var1', var1);
         formData.append('var2', var2);
         formData.append('var3', var3);
         formData.append('var4', var4);

       axios
         .post("/myUrl/downloadFile", formData)
         .then((response) => {
           console.log(response.data)
            const url = window.URL.createObjectURL(new Blob([response]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', zipName+ '.zip');
            document.body.appendChild(link);
            link.click()}
            ).catch(e => {
          console.error(e);
        });

编辑：我尝试了 tony19 的回答，但我仍然得到同样的错误。不确定是否有帮助，但我想获得多个 xml 和 sql 文件。

EDIT2：这是我的 console.log() 中 response.data 的打印： 在此处输入图像描述

标签： javascriptvue.jsaxios

解决方案

在这一行：

const url = window.URL.createObjectURL(new Blob([response])); // DON'T DO THIS
                                                 ^^^^^^^^

...您正在创建一个指向整个Axios 响应对象（包括 HTTP 状态代码、标头等）的 blob 的对象 URL，但您实际上希望其中的data属性如下所示：

const url = window.URL.createObjectURL(new Blob([response.data]));

推荐阅读