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

接口返回如下图所示:

打印结果如下图所示:

出现问题的原因的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), ''))}`
      })
相关推荐
海的诗篇_1 分钟前
前端开发面试题总结-vue2框架篇(三)
前端·javascript·css·面试·vue·html
Danny_FD2 分钟前
在 React 函数组件中实现 `<textarea>` 平滑自动滚动到底部
前端
掘金一周13 分钟前
数据脱敏的这6种方案,真香!| 掘金一周 5.29
前端·人工智能·后端
小小愿望15 分钟前
彻底禁用移动端H5页面默认下拉刷新功能:原理与实战
前端
Antioper24 分钟前
盘点前端经典手写代码题
前端
断竿散人24 分钟前
⚡CSS动画性能优化:60fps丝滑体验的终极秘籍
前端·css·性能优化
天天摸鱼的java工程师28 分钟前
前端难还是后端难?作为八年后端开发,我想说点实话
前端·后端·程序员
工呈士1 小时前
TCP/IP 协议详解
前端·后端·面试
AryaNimbus1 小时前
“我 Cursor Pro 怎么用三天就没了?”——500 次额度的真相是这样
前端·cursor
Turing_0101 小时前
《HarmonyOS Next分布式实战:跨设备流转玩出花!迁移+协同=超级终端》
前端