位置: IT常识 - 正文

axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时,正确处理返回值(axios请求设置超时时间)

编辑:rootadmin
axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时,正确处理返回值

推荐整理分享axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时,正确处理返回值(axios请求设置超时时间),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:axios请求配置,axios请求设置超时时间,axios请求设置cookie,axios请求设置cookie,axios请求设置cookie,axios设置请求超时,axios response,axios请求设置超时时间,内容如对您有帮助,希望把文章链接给更多的朋友!

问题:调用后台图片接口,后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。

解决:

1、设置axios接收参数格式为"arraybuffer":

responseType: 'arraybuffer'

2、转换为base64格式图片数据在img标签显示:

return 'data:image/png;base64,' + btoa( new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '') );

返回的string直接放在img标签src可直接显示

二、设置axios接收参数格式为"blob":axios.post( ExportUrl, Params, { responseType: 'blob' }) .then(function(response) { this.url = window.URL.createObjectURL(new Blob([response.data])); });三、通过a标签下载文件const url = '下载的url链接';const link = document.createElement('a');link.href = url;link.target = '_blank';link.setAttribute('download', 'Excel名字.xlsx');document.body.appendChild(link);link.click();axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时,正确处理返回值(axios请求设置超时时间)

responseType值的类型

值数据类型‘’DOMString(默认类型)arraybufferArrayBuffer对象blobBlob对象documentDocumnet对象jsonJavaScript object, parsed from a JSON string returned by the servertextDOMString

实例 返回值不同情况的处理方式,举例如下:

①、请求设置为 responseType: ‘arraybuffer’, 请求成功时,后端返回文件流,正常导出文件; 请求失败时,后端返回json对象,如:{“Status”:“false”,“StatusCode”:“500”,“Result”:“操作失败”},也被转成了arraybuffer

此时请求成功和失败返回的http状态码都是200

解决方案:将已转为arraybuffer类型的数据转回Json对象,然后进行判断

代码如下

async downloadFile (file) { let res = await this.$axios.post(this.API.order.tradeImpExcle, { responseType: "arraybuffer" }); if (!res) return; try { //如果JSON.parse(enc.decode(new Uint8Array(res.data)))不报错,说明后台返回的是json对象,则弹框提示 //如果JSON.parse(enc.decode(new Uint8Array(res.data)))报错,说明返回的是文件流,进入catch,下载文件 let enc = new TextDecoder('utf-8') res = JSON.parse(enc.decode(new Uint8Array(res.data))) //转化成json对象 if (res.Status == "true") { this.refresh() this.$message.success(res.Msg) } else { this.$message.error(res.Result) } } catch (err) { const content = res.data; const blob = new Blob([content]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", res.headers["content-disposition"].split("=")[1] ); document.body.appendChild(link); link.click(); } }

②、请求设置为 responseType: ‘blob’,

解决方案:将已转为blob类型的数据转回Json对象,然后进行判断

代码如下

async downloadFile (file) { let formData = new FormData(); formData.append("allTradesExcelFile", file); let res = await this.$axios.post(this.API.order.tradeImpExcle, formData, { responseType: "blob" }); if (!res) return; let r = new FileReader() let _this = this r.onload = function () { try { // 如果JSON.parse(this.result)不报错,说明this.result是json对象,则弹框提示 // 如果JSON.parse(this.result)报错,说明返回的是文件流,进入catch,下载文件 res = JSON.parse(this.result) if (res.Status == "true") { _this.refresh() _this.$message.success(res.Msg) } else { _this.$message.error(res.Result) } } catch (err) { const content = res.data; const blob = new Blob([content]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", res.headers["content-disposition"].split("=")[1] ); document.body.appendChild(link); link.click(); } } r.readAsText(res.data) // FileReader的API }
本文链接地址:https://www.jiuchutong.com/zhishi/295268.html 转载请保留说明!

上一篇:HTML---列表(html列表去掉点)

下一篇:基于Springboot社区疫情防控管理系统 毕业设计-附源码164621(基于springboot的oa)

  • 截长图电脑快捷键(电脑截长图图快捷键)

    截长图电脑快捷键(电脑截长图图快捷键)

  • 华为手机投屏小米电视怎么设置(华为手机投屏小米平板)

    华为手机投屏小米电视怎么设置(华为手机投屏小米平板)

  • 微信如何拒收对方信息(微信如何拒收对方语音通话)

    微信如何拒收对方信息(微信如何拒收对方语音通话)

  • opporeno4是屏幕指纹吗(opporeno4是不是屏幕指纹)

    opporeno4是屏幕指纹吗(opporeno4是不是屏幕指纹)

  • opporeno4pro屏幕刷新率是多少(opporeno4pro刷机包)

    opporeno4pro屏幕刷新率是多少(opporeno4pro刷机包)

  • 手机管家清理了视频哪里找回(手机管家清理了文件怎么找回)

    手机管家清理了视频哪里找回(手机管家清理了文件怎么找回)

  • 荣耀手表一代和二代的区别(荣耀的手表好还是华为的手表好)

    荣耀手表一代和二代的区别(荣耀的手表好还是华为的手表好)

  • 抖音入会是什么情况(抖音入会有什么坏处)

    抖音入会是什么情况(抖音入会有什么坏处)

  • 芒果tv积分兑换商品多久发货(芒果tv积分兑换会员几点更新)

    芒果tv积分兑换商品多久发货(芒果tv积分兑换会员几点更新)

  • qq只看资料卡有记录吗(qq只看资料卡有记录吗2021)

    qq只看资料卡有记录吗(qq只看资料卡有记录吗2021)

  • ipad3强行升级ios10(ipad3强行升级ios10教程)

    ipad3强行升级ios10(ipad3强行升级ios10教程)

  • 超清视效怎么用(什么叫超清视效)

    超清视效怎么用(什么叫超清视效)

  • 对方朋友圈背景是灰色的(微信被删除对方朋友圈背景)

    对方朋友圈背景是灰色的(微信被删除对方朋友圈背景)

  • 手机进水无限重启原因(手机进水无限重启几天能好)

    手机进水无限重启原因(手机进水无限重启几天能好)

  • qq达人最多能补几天(qq达人一天能补几次)

    qq达人最多能补几天(qq达人一天能补几次)

  • 网线四根和八根区别(网线四根和八根怎么接一起)

    网线四根和八根区别(网线四根和八根怎么接一起)

  • windows xp是什么操作系统

    windows xp是什么操作系统

  • 小米手机怎么刷机按什么键(小米手机怎么刷门禁卡)

    小米手机怎么刷机按什么键(小米手机怎么刷门禁卡)

  • ps如何去红眼(ps中去除红眼)

    ps如何去红眼(ps中去除红眼)

  • iphone11的电池容量(iphone11系列手机电池容量)

    iphone11的电池容量(iphone11系列手机电池容量)

  • 池式连接超时怎么解决(池式连接请求超时要怎么办)

    池式连接超时怎么解决(池式连接请求超时要怎么办)

  • 红米note8有没有nfc(红米note8有没有nfc功能怎么用)

    红米note8有没有nfc(红米note8有没有nfc功能怎么用)

  • qq什么时候显示正在输入(QQ什么时候显示iPhone在线)

    qq什么时候显示正在输入(QQ什么时候显示iPhone在线)

  • 新浪新闻如何设置推送(新浪新闻怎么设置密码)

    新浪新闻如何设置推送(新浪新闻怎么设置密码)

  • windows7如何进入安全模式(windows7如何进入bios设置)

    windows7如何进入安全模式(windows7如何进入bios设置)

  • C++ 创建文件夹的几种方式汇总(c++怎么创建文件夹)

    C++ 创建文件夹的几种方式汇总(c++怎么创建文件夹)

  • 电脑学习网免费下载最新NotePad++v8.4.2代码编辑器英特尔64位中文安装版~超好用的程序代码编辑软件(学电脑的好网站)

    电脑学习网免费下载最新NotePad++v8.4.2代码编辑器英特尔64位中文安装版~超好用的程序代码编辑软件(学电脑的好网站)

  • 企业所得税年报申报时间
  • 手机超过多少钱可以报警立案
  • 私募基金管理公司
  • 商业折扣的纳税影响
  • 购入材料用于安装工程
  • 代收车船税没有发票能走帐吗
  • 上年的增值税专票,下年还能抵扣认证吗
  • 盈余公积什么时候提取
  • 小企业报表为什么勾选不到小型微利企业
  • 劳务派遣差额征税政策
  • 做账计入收入没有结转成本怎么做账?
  • 技术服务费属于什么大类
  • 忘了结转成本怎么办
  • 银行授信额度如何分配
  • 公司购买五金用交税吗
  • 带息负债融资成本率意义
  • 证券资金利息
  • 结转本月各项损益
  • 进项票未认证怎么入账
  • win10设置闹钟
  • 消费税有减免政策吗
  • 开办费的账务处理实例
  • 进出口商品的税率是多少
  • laravel 分层
  • 收到厂家赠送商品入库
  • 贴现息计入什么科目
  • 企业汇算清缴发现之前收入记多了可以调整吗
  • vue 动态样式
  • 长期股权投资权益法转成本法
  • 投资者投入固定资产的成本,应当按照投资合同
  • word element
  • 企业所得税申报更正怎么操作
  • 实收资本 增加
  • 什么是社会团体组织
  • 购买汽车相关费用标准
  • 季度利润是负数怎么办
  • 融资租赁的固定资产
  • 投资收益借贷方代表什么
  • 费用发票先入账吗
  • 电商行业退货退款流程
  • 城建税和教育费附加地方教育费附加税率
  • 企业所得税资产总额季初季末怎么填
  • 没有收入如何做账
  • 息税前利润的计算公式EBIT
  • 补缴以前年度所得税怎么做会计分录
  • 小额贷款涉及的法律
  • 减免税款科目期末有余额吗
  • 上年记错账了,本年如何调整
  • 应收账款坏账计入资产减值损失还是信用减值损失
  • 税控盘年费每年都可以抵扣吗
  • 收到其他企业投资是属于其他业务收入吗
  • 哪些费用是不可抵扣的
  • 股东分派现金股利怎么算
  • 为什么自创商誉不能确认
  • 公账直接转给个人,对公司有什么影响吗
  • 小规模纳税人超过30万是全额纳税吗
  • mysql的子查询语句
  • mysql中怎么修改数据
  • mysql分页实现
  • mac steam一直更新
  • desl.exe是什么
  • win8.1启动项设置
  • winxp0000007b修复
  • win xp 内存
  • ksysslim.exe是什么
  • Linux上PPTP VPN的一键安装以及设置开机启动的方法
  • unity加密解决方案
  • 常见的场景切换效果有哪些
  • cocos2dx 3.3 helloworld 入门 学习与详解
  • js原型面试题
  • IE、FF、Chrome浏览器中的JS差异介绍
  • dirsearch批量
  • unity 3d场景2d角色
  • node.js的安装方法
  • dom方法总结
  • 如何查询税务是否签订三方
  • 付姓人数
  • 亿企赢工作前景怎么样
  • 腾讯 短信服务
  • 税务局怎么知道房屋出租
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设