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

接口返回如下图所示:

打印结果如下图所示:

出现问题的原因的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), ''))}`
      })
相关推荐
姑苏洛言25 分钟前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言1 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手3 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿3 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123454 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js