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

2024-03-27

在我的 vueJs 应用程序中,我有以下 axios POST api 调用,该调用应该返回我希望保存在 .zip 文件夹中的多个文件。但是,当我使用以下 axios 方法时,我无法打开我的 zip,并且出现错误,提示“myfolder.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: here's a print of response.data in my console.log(): enter image description here


在这一行中:

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

...您正在为整个 blob 创建一个对象 URLaxios响应对象 https://github.com/axios/axios#response-schema(包括 HTTP 状态代码、标头等),但您实际上想要的是data其中的属性如下:

const url = window.URL.createObjectURL(new Blob([response.data]));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 axios 下载包含多种类型文件的 zip 的相关文章

  • JavaScript 对输入的循环创建一个对象数组

    我正在尝试循环 div 中的输入元素 以创建对象数组 div div
  • 如果列表中的某个字符位于该字符之前,请选择该字符

    我有这个正则表达式 a z s gmi 该正则表达式选择 从我的文字中 sme a eliezovce 2015 Spolo ne pre Eur pu Osl vili aj 940 但我只想选择 没有 如果列表中的某些字符 a z 之前
  • JavaScript 原型继承和 html canvas

    我是一名 Ruby 开发人员 最终决定认真学习 JavaScript 所以我买了一些书 开始深入研究 但当我试图理解原型继承时 我很快就陷入了困境 这本书的例子之一如下 给定一个 Shape 其原型有一个绘制方法 以及两个子形状 一个 Tr
  • 动态添加jinja模板

    我有一个 jinja 模板 它是一组 div 标签内的唯一内容 div include temppage html div 当我按下按钮时 我想用其他内容替换标签之间的所有内容 我希望用另一个 jinja 模板 include realpa
  • 如何设置黄瓜环境变量

    我有以下 package json name newcucumber version 1 0 0 main index js scripts test node modules bin cucumber js firefox node mo
  • 如何在 .js 中的字符串中插入来自 ruby​​ 示例的变量[重复]

    这个问题在这里已经有答案了 在 ruby 中 您可以将变量插入到字符串中 如下所示 x sake puts I like x I like sake 例如 def what i like word I like word end 在 jav
  • 如何使用 QuerySelector 获得第二个匹配项?

    以下语句给出了该类的第一个元素titanic element document querySelector titanic 我如何检索具有相同类的第二个元素 Use document querySelectorAll https devel
  • 角度引导手风琴数据绑定问题

    我有 2 个相同型号的下拉菜单 一个位于手风琴内部 另一个位于外部 外部下拉菜单在 2 路数据绑定方面工作良好 但手风琴内部的下拉菜单似乎只有 1 路绑定 换句话说 在 UI 中选择并不会设置模型值 我找到了一个建议here https s
  • Node.js 循环发送 http 请求

    我实际上遇到了使用 node js 执行的 javascript 代码的问题 我需要循环发送http请求到远程服务器 我在代码中设置了www google ca 这是我的代码 var http require http var option
  • 如何在正则表达式中区分数字和ip地址?

    例如 如果我们查看 5 56 和 183 55 0 144 基本上 当你做这样的事情时 d d 它匹配 5 56 189 55 和 0 144 有没有办法通过正则表达式仅匹配数字而不匹配 ip 地址的部分 我尝试使用前瞻 但我不知道它应该是
  • 如何使用 ui-router 中的 ui-sref 将参数传递给控制器

    我需要传递和接收两个参数到我想要转换到的状态ui srefui router 的 例如使用下面的链接将状态转换为home with foo and bar参数 a Go to home state with foo and bar para
  • 可点击的进度条

    我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条 这是我能做到的最好的 有没有办法将滑块放置在进度条内但不干扰进度可视化 堆栈闪电战 https stackblitz com edit angular
  • jQuery 和所有 .js 文件无法在本地运行,只能在外部运行

    我有一个奇怪的问题 我正在编写一个网站 包括 jQuery 和一些插件 它们存储在 js 文件夹中 当我尝试通过浏览器 jQuery 打开它时 插件和所有自定义脚本都不起作用 也许这与我的代码有关 但不这么认为 当然 当我在外部包含 jQu
  • 单击文件下载后,成功后使用 AJAX 重定向到另一个页面

    In my WordPress project my Download button containing a zip file which onClick should be downloaded So the HTML producin
  • jqPlot DateAxis tickInterval 不起作用

    我试图每月绘制一个包含单个数据点的图表 我会在每个月的第一天将其作为一个点发送到 jqPlot jqplot actualChart 2011 10 01 0 296 2011 11 01 0 682 title programSelect
  • 有没有办法显示嵌套在 Grid 组件内的 Material-UI 抽屉?

    我正在使用 Material UI 创建一个 Web 应用程序 主页分为 3 个网格 每个网格有一个height of 500px 我想在中间网格内显示一个带有一些操作选项的抽屉 那可能吗 到目前为止 我只能在整个屏幕上显示它 这是我的主要
  • 当 mp4 是唯一来源时,自定义 HTML5 视频控件不起作用

    问题 我只有一个视频源 mp4 因为我正在尝试向 tumblr 视频添加自定义控件 如果只有mp4作为源video duration返回为NaN 作为使用 3 个源 mp4 webm ogg 时的测试 它可以工作 所以video durat
  • 如何连接/组合两个数组以连接成一个数组?

    我正在尝试将 JavaScript 中的 2 个数组合并为一个 var lines new Array a b c lines new Array d e f 这是一个简单的例子 我希望能够将它们组合起来 这样当读取第二行时 数组中的第四个
  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr
  • 当 Vuejs 中的 props 值发生变化时,DOM 不会更新

    我有父母和孩子 在父级中 我将 3 个变量作为 props 传递给子级 在孩子中我正在使用watch 寻找变量的变化 当孩子第一次被创建时watch按预期工作 但是当更新 props 中的数据时 子级的 DOM 不会更新 正在寻找变量数据变

随机推荐

  • 使用MediaCodec和MediaExtractor对视频进行解码和编码

    我需要将视频解码为一系列位图 以便我能够修改它们 然后将它们压缩回 android 中的视频文件 我计划通过使用来管理这个getFrameAtTime并将其保存到图像序列中 然后我可以修改序列中的图像并将其编码回电影 但我对此有两个问题 首
  • Spark SQL 和时区 - 如何将 unix 时间戳转换为本地化时间戳

    我需要从 Spark DataFrame 将 epoch unix 时间戳列 例如 1509102527 GMT 星期五 2017 年 10 月 27 日 11 08 47 转换为本地化时间戳 以便获取特定时区的本地小时 是否有 Spark
  • Unix 上具有多个读取器的命名管道 (FIFO)

    我有两个程序 Writer 和 Reader 我有一个从写入器到读取器的 FIFO 因此当我向写入器中的标准输入写入内容时 它会从读取器打印到标准输出 我尝试在打开两个 Reader 的情况下执行此操作 并且仅从两个 Reader 程序之一
  • 更改通知标题的颜色 (Android)

    这是我的代码 一切正常 val builder NotificationCompat Builder this NOTI ID setSmallIcon R drawable ic stat name setContentTitle My
  • 双击标题栏时如何知道窗口是否最小化?

    This image is from SystemPreferences gt Appearance 我想知道如何以编程方式获取该值 我问这个问题是因为我正在绘制一个带有自定义标题栏的窗口 并且我希望它 在行为上 尽可能类似于普通 非自定义
  • 如何进行网站容量规划? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我刚读完书容量规划的艺术 https rads stackoverflow com amzn click com 0596518579 顺便说一句 我
  • 使用 OpenCV 将图像文档转换为黑白

    我是 OpenCV 和图像处理的新手 我不知道如何解决我的问题 我有一张用 iPhone 制作的文档照片 我想将该文档转换为黑白 我尝试使用阈值 但文本不太好 有点模糊且难以阅读 我希望文本看起来与原始图像相同 只有黑色 背景为白色 我能做
  • Azure 表存储 - 可能不存在的列上的 where 子句

    我正在向我的天蓝色表添加一个新列 例如 该表称为 User 新列称为 ComputationDate User 表已存在 其中的行没有此新列 ComputationDate 我对此有一个疑问 如下 var usersDue from use
  • FastAPI 中的返回值[重复]

    这个问题在这里已经有答案了 我试图在 FastAPI 中返回 matplotlib figure Figure 如果我像图像一样保存它 它就可以工作 代码在这里 router get graph id file name Return th
  • SQL SMO 执行批处理 TSQL 脚本

    我正在使用 SMO 执行批处理 SQL 脚本 在 Management Studio 中 该脚本的执行时间约为 2 秒 使用以下代码 大约需要 15 秒 var connectionString GetConnectionString ne
  • 非标准网址格式

    我们在应用程序中向客户发送了邮件 其中有一个链接 在 yahoo 和 Hotmail 中 每当客户单击链接时 它都会显示以下警告 替代文本 http img691 imageshack us img691 5402 warningp jpg
  • Twitter Bootstrap 下拉链接不起作用

    我正在使用引导程序版本2 0 我有以下 html 结构 现在当我点击Filter by Team下拉菜单正确显示 现在 当我点击链接时 我应该被带到该页面 但链接确实not工作 我的意思是 当我单击下拉元素时 它们应该将我带到一个 URL
  • 使用 JS 检查 HTML5

    我有一个页面包含一些 JS 来更新浏览器历史记录 pushState 使用 HTML5 由于 IE8 不支持 HTML5 用户会被告知该页面包含错误 虽然这并没有削弱页面的功能 但它看起来不太专业 所以我想知道在运行此代码之前是否检查用户浏
  • Chrome 在下载的文件中添加“-, 附件”

    我使用 Symfony2 框架并使用以下代码导出 xml 文件 response gt setStatusCode 200 response gt headers gt set Content Type application xml re
  • MSIL 源代码的编译器位于 .NET Framework 中的什么位置?

    我有一个关于 NET Framework 的问题 MSIL 源代码的编译器驻留在哪里 是在 CLR 本身还是任何其他层 另外 请给我提供有关 NET Framework 的非常小 但足够 的插图 这是一个快速流程图 未遵循的符号 可以澄清大
  • 获取退出代码 - Go

    我正在使用的包 os exechttp golang org pkg os exec http golang org pkg os exec 在操作系统中执行命令 但我似乎找不到获取退出代码的方法 我可以读取输出 ie package ma
  • 如何在类之间传递对象

    所以我在这里想做的是传递一个类的相同副本 class A 到另一个班级 class B but class B实例化于class A Using a new中的声明class B不起作用 因为当我希望能够使用第一个实例中的变量时 它会导致无
  • 如何在 ubuntu 中使用 python 将原始字符串发送到点阵打印机?

    我有一台点阵打印机 LX 300 通过网络连接到我的计算机 如何在 Python 中将带有 ESCP 字符的原始字符串直接发送到打印机 该计算机通过另一台计算机连接到打印机 我需要发送原始字符串 因为 LX 300 图像打印结果模糊 问题
  • 如何在 Spring.Net 中配置 NULL 对象

    在我正在工作的特定项目中 有一个空日志服务对象是合适的 由于这是在 Spring Net 中配置的 因此如何将 spring net 对象配置为 null 这就是我想做的 是否可以
  • 如何使用 axios 下载包含多种类型文件的 zip

    在我的 vueJs 应用程序中 我有以下 axios POST api 调用 该调用应该返回我希望保存在 zip 文件夹中的多个文件 但是 当我使用以下 axios 方法时 我无法打开我的 zip 并且出现错误 提示 myfolder zi