位置: 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)

  • 可变现净值相关税费包括消费税吗
  • 小规模纳税人出售使用过的汽车
  • 汇算清缴计提所得税在哪个月
  • 房地产企业怎么认定
  • 开模具厂一年能挣多少钱
  • 定期定额户申报表怎么填
  • 公司车辆过户给个人需要交多少税
  • 陈列费属于什么大类
  • 私募基金管理公司
  • 委托收款结算方式流程图
  • 退休回聘政策与程序
  • 应交增值税进项税额转出借贷方向表示什么
  • 税款多交一分钱怎么做分录
  • 所得税汇算清缴时间期限
  • 员工因为过错给公司造成损失
  • 将自制的一批新产品用于对外投资,生产成本为300000
  • 计提工资后发放时结转到什么科目
  • 企业现金股利的支付能力,在很大程度
  • 加油站销售加油卡是否征收增值税
  • 老板买增票财务怎么做账
  • 专项拨款形成的固定资产递延收益
  • 单位充话费送手机
  • 建筑企业未开票收入增值税申报表怎么填写
  • 定额发票验旧是什么意思
  • 2019年水利部
  • 销货成本销货成本是什么类账户
  • 企业购入交易性金融资产支付的交易费用
  • 备件和耗材的定义
  • 企业破产应收账款要发询证函吗
  • 拆迁补偿款需要交企业所得税吗
  • 制作广告费用
  • 1697510703
  • 已认证的进项税额转出怎么做账务处理
  • 简述linux系统的启动
  • mac怎么彻底删除一个软件
  • win10无法上网,显示灰色的飞行模式
  • win10怎么找应用程序
  • 2020年外贸企业年终总结
  • 杜鹃花的养殖方法和修剪
  • 华为od机试成绩什么时候出来
  • 36号文45条
  • 第一章 使用layui的表格和表单
  • vue框架搭建步骤
  • vue+element-ui项目
  • 进项加计抵减会计分录怎么做
  • 申请一般人纳税需要什么东西
  • css样式居中
  • 企业合并属于非企业吗
  • 受托代销的含义
  • 生产出口退税企业有哪些
  • 一次性伤残就业补助金怎么领取
  • 现金流量表格式有几种
  • 企业支付的产品和物资的原始价格是采购成本中的
  • 快递费专票可以报销吗
  • 一般纳税人厂房租赁增值税税率是多少
  • 公司分红怎么做账
  • 物业管理企业应当与居委会共同做好什么工作
  • centos 安装选择
  • window10注册表
  • centos bond mode
  • win7系统自动更新在哪里关闭啊
  • ubuntu安装kdevelop
  • win8系统开机桌面文件不见了
  • Win7 vpn连接不上怎么办?Win7系统vpn连接不上问题的解决方法
  • windows xp玩lol
  • 蓝屏错误疑难解答win7
  • win7系统如何修改ip地址
  • 学习使用grunt来打包JavaScript和CSS程序的教程
  • 使用forever管理nodejs应用教程
  • Node.js中的事件循环是什么
  • Node.js中 __dirname 的使用介绍
  • 怎么打印纳税申报清单
  • 溧阳北站规划图
  • 推进落实类似的词语
  • 减免性质代码怎么填写才正确
  • 物业监控不完善怎么提意见
  • 电子税务局怎么删除办税员
  • 地税是什么税种
  • 应交税金包含企业所得税吗
  • 湖南 资源税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设