后端返回验证码图片怎么在前端页面展示

发布时间 2023-05-24 10:45:36作者: front-gl

1.验证码从后端返回给前端 通常是blod格式 如果直接用 src  引用 没办法显示

log出来的结果是这样

 

可以看见取到了图片 但是显示不出来

如何把blod格式转化为src格式

1.调接口时 请求里面加入responseType: 'arraybuffer',这一步很重要 一定要加

 

 

2. 写入window.URL.createObjectURL(new Blob([res.data],{type:'image/png'}))

代表把blob格式转化url格式

 这是html 还是src引入

 

 

 

axios里的responseType

背景

我在Node.js上通过axios下载一段音频

const audioContent = await axios.get(downloadSrc, {
 });

打开文件后竟然提示文件格式损坏
凭借我多年朴素的直觉,应该是要设置responseType:'blob',还是不行,直到一顿搜索引擎,发现了responseType: "arraybuffer", 可以了

看axios源码

我想一定是axios根据responseType: "arraybuffer"对返回类型做了什么特殊处理,结果看了半天源码也没发现端倪,凭借我多年朴素的直觉,我想到了XMLHttpRequest

XMLHttpRequest

XMLHttpRequest 本身就是支持responseType

  • ""
    responseType 为空字符串时,采用默认类型 DOMString,与设置为 text 相同。
  • arraybuffer
    response 是一个包含二进制数据的 JavaScript ArrayBuffer。
  • blob
    response 是一个包含二进制数据的 Blob 对象 。
  • document
    response 是一个 HTML Document 或 XML XMLDocument,这取决于接收到的数据的 MIME 类型。请参阅 XMLHttpRequest 中的 HTML 以了解使用 XHR 获取 HTML 内容的更多信息。
  • json
    response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
  • text
    response 是一个以 DOMString 对象表示的文本。
  • ms-stream
    response 是下载流的一部分;此响应类型仅允许下载请求,并且仅受 Internet Explorer 支持。


var ajaxObj = new XMLHttpRequest();
    ajaxObj.responseType = "arraybuffer";
    ajaxObj.open("get", "http://10.210.2.133:9192/example/api/simple/object");
    ajaxObj.send();
    ajaxObj.onreadystatechange = function () {
      if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
        console.log(ajaxObj.responseText);
      }
    };