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

接口返回如下图所示:

打印结果如下图所示:

出现问题的原因的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), ''))}`
      })
相关推荐
兆子龙7 分钟前
Node.js ESM Loader Hooks 介绍:用 module.register 做转译、Import Map 与自定义解析
前端
四眼肥鱼8 分钟前
flutter 利用flutter_libserialport 实现SQ800 串口通信
前端·flutter
ZFSS8 分钟前
OpenAI Images Edits API 申请及使用
前端·人工智能
Lee川20 分钟前
从零构建AI对话应用:Vite脚手架搭建与API密钥安全实践
前端·程序员
允许部分打工人先富起来22 分钟前
在node项目中执行python脚本
前端·python·node.js
钟智强22 分钟前
Flutter引擎Android平台JNI层未验证指针转换漏洞
前端
骑着小黑马27 分钟前
Electron + Vue3 + AI 做了一个新闻生成器:从 0 到 1 的完整实战记录
前端·人工智能
Sailing29 分钟前
LLM 调用从 60s 卡死降到 3s!彻底绕过 tiktoken 网络阻塞(LangChain.js 必看)
前端·langchain·llm
洋洋技术笔记29 分钟前
计算属性与侦听器
前端·vue.js
用户8144869581129 分钟前
“马上”有惊喜:在 Rokid 灵珠平台上构建 FPS 级 AR 红包雷达应用
前端