后端接口返回图片,前端的处理方法

接口返回如下图所示:

打印结果如下图所示:

出现问题的原因的axios默认返回的是json文本形式,二进制图片数据被强制转换成了 json 文本形式

处理方法:

首先,在axios中,将responseType默认返回数据类型json改为arraybuffer类型

复制代码
export function downloadPro(data) {
    return request({
        url: '/aisynergy/api/v1/outboundScene/downloadFlowChart',
        method: 'post',
        responseType: 'arraybuffer',
        data
    })
}

然后,在页面中:

复制代码
 downloadPro(formData).then(res => {
        this.picUrl= `data: image/jpeg;base64,${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
      })
相关推荐
老K(郭云开)27 分钟前
最新版Chrome浏览器调用ActiveX控件技术——alWebPlugin中间件V2.0.42版发布
前端·chrome·中间件
百锦再1 小时前
Vue环境下数据导出PDF的全面指南
前端·javascript·vue.js·python·django·pdf·pygame
菜鸟una4 小时前
【微信小程序 + 高德地图API 】键入关键字搜索地址,获取经纬度等
前端·vue.js·微信小程序·小程序·typescript
进取星辰5 小时前
33、魔法防御术——React 19 安全攻防实战
前端·安全·react.js
小赖同学啊6 小时前
深度解析 Element Plus
前端·javascript·vue.js
二十雨辰6 小时前
[CSS3]百分比布局
前端·html·css3
大大。6 小时前
Vue3 与 Vue2 区别
前端·面试·职场和发展
EndingCoder6 小时前
从零基础到最佳实践:Vue.js 系列(3/10):《组件化开发入门》
前端·javascript·vue.js
职场马喽6 小时前
vue+luckysheet导出功能(解决了样式为null的报错问题)
前端·javascript·vue.js
北辰浮光6 小时前
[Vue]路由基础使用和路径传参
前端·javascript·vue.js