将请求返回的图片转为Base64形式显示在页面上

最新推荐文章于 2024-08-10 09:36:16 发布

swpu_lwf

最新推荐文章于 2024-08-10 09:36:16 发布

阅读量6.1k

点赞数 1

分类专栏： JavaScript 文章标签：请求结果处理图片 Base64

本文链接：https://blog.csdn.net/liwenfei123/article/details/94449747

版权

本文介绍如何处理返回图片的请求，将其转化为Base64编码并展示在页面上，实现动态刷新验证码功能。通过设置请求参数responseType为'arraybuffer'，获取二进制数据，再利用btoa()方法进行编码。

摘要由CSDN通过智能技术生成

情景：
如图该请求返回一张图片，我该如何显示在页面上呢？
在这里插入图片描述

代码如下：

transformArrayBufferToBase64 (buffer) {
        var binary = '';
        var bytes = new Uint8Array(buffer);
        for (var len = bytes.byteLength, i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

    componentDidMount() {
        // ...
        this.getSetCodeImg();
    }
    
    getSetCodeImg = () => {
        timerId = setTimeout(this.getSetCodeImg, 1000 *10 * 60 *5);
        axios.get('http://120.77.204.211:9091/api/getCodeImg',{responseType: 'arraybuffer'}).then(res => {
        var img = document.create