首页 > 其他分享 >后端返回图片乱码,前端解决方法

后端返回图片乱码,前端解决方法

时间:2023-09-14 16:56:32浏览次数:33  
标签:返回 src console log img res 前端 乱码 window

后端返回的文件流格式

 

 前端解决

axios({
        url:"/api/Component/ins/downloadQr?codes=" + data.codeIdentification,
        method:"GET",
        headers:{
            "Authorization": window.platToken.token_type +" "+window.platToken.access_token,
        },
        responseType:'blob'
    })
    .then(res=>{
        console.log('------------------------------');
        console.log(res.data);
        
            const src = window.URL.createObjectURL(new Blob([res.data],{type: 'application/octet-stream' }))
            const img = document.querySelector('#componentQRcode');
            console.log(img, src);
            img.src = src
    })
    .catch(err=>{
        console.log(err);
    })

  如果使用jquery,可能转换后还是不显示,改为使用axios,因为jq是比较老的,处理流数据类型,可能会做二次处理

标签:返回,src,console,log,img,res,前端,乱码,window
From: https://www.cnblogs.com/brillant/p/17702864.html

相关文章

  • Web前端:2022年十大React表库
    Web前端:2022年十大React表库粤嵌HTML5培训2022-04-1810:23广东表格是每个应用程序的关键组件,手动构建和样式表不再有效,因为有大量完全准备好的库可用于该功能。因此,我们利用这些库来简化我们的前端任务。我们收集了一些将在2022年派上用场的最佳React......
  • AES解密控制台打印出乱码解决方法
    使用其它方法控制台一直打印出乱码,后来使用了这种方法,一下就解决乱码问题。代码如下:fromCrypto.CipherimportAESfrombinasciiimporta2b_hexdefungenerateAES(key,text):aes=AES.new(str.encode(key),AES.MODE_ECB)aes_text=aes.decrypt(a2b_hex(text)).decode(......
  • 过滤树,返回符合条件的节点以及它的上级节点,以及是否保留它的下级节点
    constfilterReceiveDeptTree=computed(()=>{if(state.filterText){letdeepclone=deepClone(state.receiveDeptTree);constfilteredTree=filterTree(deepclone,(node)=>{returnnode......
  • Web前端学习路线
    学习Web前端需要的精选的书本和网络资源HTML教程CSS教程JavaScript教程BootStrap教程AJAX教程Node.js教程Vue.js教程React教程此外,在b站上有很多教学视频,亲测有效!不积跬步,无以至千里;不积小流,无以成江海。---《荀子》Web前端的方向和分支方向低代码方向前端......
  • restTemplate接收返回对象中的数据为list是集合被转为对象问题处理
    接收的对象resultModel是服务者接口自定义的返回对象,包含msg,code,以及一个泛型对象data用于存放接口返回的数据。 当消费者通过restTemplate,postObject调用时,data需要通过map封装一下需要返回的数据,然后将map填充到data。若map中出现了集合数据,当集合数据只有一条时,会出现集合......
  • Jmeter BeanShell, 读取HTTP请求返回的JSON,并将其存到文件中
    1、创建BeanShellSampler将fastjson-1.2.30.jar放到Jmeter安装目录\lib下 importjava.io.*;importcom.alibaba.fastjson.JSONObject;importjava.io.IOException;importjava.io.File;importjava.io.FileOutputStream;importjava.io.FileWriter;privatestat......
  • 前端项目npm install安装报错:code ERESOLVE ERESOLVE could not resolve
    背景:使用npm安装依赖的时候,发现报了如下的错误:npmERR!codeERESOLVEnpmERR!ERESOLVEunabletoresolvedependencytreenpmERR!npmERR!Whileresolving:[email protected]!Found:[email protected]!node_modules/html-webp......
  • web前端入门到实战:HTML5基础-新增标签+新增属性+布局案例
    html5中常用的结构标签article文章header头部nav导航section区域aside侧边栏hgroup区块的相关信息figure定义一组内容及标题figcaption定义figure元素的标题footer底部dialog对话框使用习惯:header/section/footer>aside/articl......
  • 前端学习Day01
    Html第一节:初识heml定义:html是一种用于创建网页的标记语言,通过标签来描述页面的不同部分和元素。页面元素:构成网页结构和内容的基本单元,比如:标题,段落,图像,连接,表格等等。第一个标签:<marquee>跑马灯的效果<marquee>你好,前端!</marquee>什么是标签:标签可以写大写也可以写小写,但是标准......
  • 全栈工程师必须要掌握的前端CSS技能
    作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL,Python等,对前端的知识则不太精通。在一些比较完善的公司或者项目中,一般会搭配前端工程师,UI工程师等,来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师,在一些小型项目或者初创公......