通过post请求下载接口,接口返回流数据,前端处理下载或展示出错信息

2023-11-15

需求描述:
1、使用post请求,参数放在请求体内。所以不能用get请求。
2、后端返回流(二进制数据),前端自己处理下载
3、如果后端出错,后端返回json数据,前端处理,展示错误内容。

实现:
1、后端需要设置 response[‘Content-Type’] = ‘application/octet-stream’ 。
后端需要设置Content-Type 'application/octet-stream'

2、前端设置请求的 responseType: 'blob'

// function downloadMarkResult
request({
    url: '/api/img_mark_task/download/',
    method: 'post',
    responseType: 'blob',
    data
  })

3、前端处理下载内容:

api
        .downloadMarkResult({ task_id: v.id })
        .then(res => {
          // console.log('res111111', res)
          const data = res.data || res
          if (data.type === 'application/json') {
          # 通过相应type来判断是json还是流数据
            const reader = new FileReader()
            reader.readAsText(res, 'utf-8')
            reader.onload = e => {
              const readerres = reader.result
              let parseObj = {}
              parseObj = JSON.parse(readerres)
              this.$message.error(parseObj.msg || '操作失败')
            }
            return
          }
          const fileName = `标注结果.zip`
          
          const blob = new Blob([data], { type: 'application/zip' })
          if ('download' in document.createElement('a')) {
            // 非id
            const link = document.createElement('a')
            const blobUrl = URL.createObjectURL(blob)
            link.href = blobUrl

            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          } else {
            // IE10+
            navigator.msSaveBlob(blob, fileName)
          }
        })
        .catch(err => {
          console.log(err)
        })

要点:
使用new FileReader()来将json的二进制数据转换为json格式的数据。

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

通过post请求下载接口,接口返回流数据,前端处理下载或展示出错信息 的相关文章

随机推荐

  • springboot 没有找到service_Spring Boot 应用程序五种部署方式

    翻译自 Deploying Spring Boot Applications 1 原作者 Murat Artim 2 可以使用各种方法将 Spring Boot 应用程序部署到生产系统中 在本文中 我们将通过以下 5 种方法来部署 Spri
  • 卡尔曼滤波之线性滤波,标量滤波

    卡尔曼滤波器由一系列递归数学公式描述 它们提供了一种高效可 计算的方法来估计过程的状态 并使估计均方误差最小 卡尔曼滤波 器应用广泛且功能强大 它可以估计信号的过去和当前状态 甚至能 估计将来的状态 即使并不知道模型的确切性质 对于Kalm
  • JAVA 快速排序算法(详细实现过程介绍)

    快速排序采用了一种分治的策略 通常称其为分治法 Divide and ConquerMethod 空间复杂度 快速排序是一种原地排序 只需要一个很小的栈作为辅助空间 空间复杂度为O log2n 所以适合在数据集比较大的时候使用 时间复杂度
  • 右腿驱动电路

    转自 http www 360doc com content 18 0312 15 1751130 736374982 shtml 1 使用目的 人和外界环境 尤其是电力线会形成容性耦合 这个耦合到的能量通过人体流入大地 而人体是带电阻的
  • 最全的目标检测与跟踪发展文献综述

    实时目标检测技术作为计算机视觉领域的重要研究方向之一 他在军事侦察 视频监控 智能战斗等领域有着重要的应用场景 随着深度学习的发展和硬件水平的提升 各种深度学习的算法对于航空影响的自动化起到了巨大的推动作用 基于深度神经网络的视觉算法通过自
  • 装饰者模式---装饰者模式和桥接模式的区别

    装饰者模式 什么是装饰者模式 动态将职责附加到对象上 若要扩展功能 装饰者提供了比继承更具弹性的代替方案 装饰者模式又称为包装模式 它主要是为了扩展对象的功能 包装类通过持有对象的引用 将对象传到包装类里面 聚合 把对象包装起来 可以在调用
  • 【数学建模】灰度预测之关联度求解

    灰度预测适用范围 在实际中 若得到的是离散的 规律性不强的数据 此时线性回归就不适用了 我们需要采用灰度预测的方法 灰度预测法则是一种对含有不确定因素的系统进行预测的方法 白色系统 黑色系统 灰色系统 白色系统 指一个系统的内部特征是完全已
  • TP6关于hasOne的用法

    TP6关于hasOne的用法 实际操作中看如下案例 文章分类表 CREATE TABLE case category id bigint 20 unsigned NOT NULL AUTO INCREMENT COMMENT 主键id na
  • GO语言网络编程(并发编程)Channel

    GO语言网络编程 并发编程 Channel 1 Channel 1 1 1 Channel 单纯地将函数并发执行是没有意义的 函数与函数间需要交换数据才能体现并发执行函数的意义 虽然可以使用共享内存进行数据交换 但是共享内存在不同的goro
  • hmcl启动器安装游戏版本失败_有关HMCL的个人粗糙介绍

    简单介绍关于HMCL Hello Minecraft Launcher 受欢迎的 Minecraft 启动器的使用 github https github com huanghongxun HMCL releases 1 使用前的一些调试
  • 「问题记录|VirtualBox」OSX系统启动就异常退出的问题

    背景说明 需要一个OSX系统进行软件打包 原本想在docker中进行 奈何电脑配置不够格 所以还是回归VirtualBox的怀抱 这里记录一个小操作 问题描述 虚拟机启动后加载完毕后闪退 快到甚至有可能没看到窗口 然后就看到侧边列表的虚拟机
  • Python USB通讯

    1 下载libusb 地址 Releases libusb libusb GitHub 下载7z压缩包文件到本地 解压后将32位版本的dll文件拷贝到C Windows System32 64位的dll文件拷贝到C Windows SysW
  • pytorch中的二分类及多分类交叉熵损失函数

    本文主要记录一下pytorch里面的二分类及多分类交叉熵损失函数的使用 import torch import torch nn as nn import torch nn functional as F torch manual seed
  • bin目录下存放的是什么文件?

    bin文件夹通常里面都是什么文件 经常使用电脑系统安装程序的朋友可能会发现 很多软件在安装后都会产生一个bin文件夹 那么bin文件夹是什么 里面大多放着什么文件呢 下面我们来学习一下 避免一些错误的认知导致程序损坏等误操作 软件的安装后文
  • activiti5.17.0流程图及节点显示

    引用 activiti流程图上获取各节点的信息获取 这篇文章写得很好 揭示了图片点击出现信息的方法 于是我也做了 只不过有些改动 可能是activiti的版本不同的原因 jsp页面 通过流程实例id进行操作
  • 【从嵌入式视角学习香山处理器】四、Chisel语言基础

    文章目录 一 前言 二 Linux上对scala工程的操作 1 helloworld执行命令 2 有多个工程目录时 需要切换工程 3 编译报错 4 给vscode的scala插件设置JAVA HOME路径 三 ch4 基本组成部分 ch4
  • 第二章实验1

    周末没事正好练习下 前边 r原以为是只查看cpu寄存器内容 原来还有修改的意思 只用r即查询 用r 寄存器 则是修改该寄存器 不只是可以修改ax 可以修改其他寄存器 d 段地址 偏移地址 查看内存内容 最左边是每行的起始地址 中间是从指定内
  • dev-tool安装方法(手动安装版)

    记录一下vue调试神器dev tool的安装过程 由于是在公司内网 也不方便挂梯子 所以手动安装 下载源码在本地编译 再添加扩展程序的方式安装 过程如下 一 dev tool源码获取 git地址 https github com vuejs
  • Git分支管理策略

    原文地址 http www ruanyifeng com blog 2012 07 git html 如果你严肃对待编程 就必定会使用 版本管理系统 Version Control System 眼下最流行的 版本管理系统 非Git莫属 相
  • 通过post请求下载接口,接口返回流数据,前端处理下载或展示出错信息

    需求描述 1 使用post请求 参数放在请求体内 所以不能用get请求 2 后端返回流 二进制数据 前端自己处理下载 3 如果后端出错 后端返回json数据 前端处理 展示错误内容 实现 1 后端需要设置 response Content