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

小鱼儿 2021-12-18 15:15 480阅读 0赞

情景：  
如图该请求返回一张图片，我该如何显示在页面上呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpd2VuZmVpMTIz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpd2VuZmVpMTIz_size_16_color_FFFFFF_t_70 1]  
代码如下：

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.createElement("img");
            img.src = `data:image/jpeg;base64,${this.transformArrayBufferToBase64(res.data)}`;
            img.width = 90;
            codeImgContainner.innerHTML = '';
            codeImgContainner.appendChild(img);
            })
        }
        
    	handleChangeCodeImg = () => {
    	        clearTimeout(timerId);
    	        this.getSetCodeImg();
        }

<div className="section-pushInChannel-code">
                       <div className="section-pushInChannel-codeInputTip">
                           <FormItem label="验证码">
                               {
                                   getFieldDecorator('code', {
                                       rules: [
                                           {required: true, message: '请输入您的验证码'}
                                       ]
                                   }) (
                                       <Input placeholder="请输入您的验证码" />
                                   )
                               }
                           </FormItem>
                           <div className="section-pushInChannel-codeTip"></div>
                       </div>
                       <div className="section-pushInChannel-codeImg" onClick={this.handleChangeCodeImg}/>
                            </div>

实现效果：  
页面加载完成时，请求一次接口，转成图片插入到页面中，每5分钟请求一次，刷新验证码。点击图片重新获取验证码。  
![在这里插入图片描述][20190702160705516.png]  
注意：

1.  请求时，指定请求参数：\{responseType: ‘arraybuffer’\}，指定返回相应数据的类型，返回的data是包含二进制数据的javaScript ArrayBuffer  
    请求结果如下：  
    ![在这里插入图片描述][20190702161813104.png]
2.  btoa() 方法用于创建一个 base-64 编码的字符串。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpd2VuZmVpMTIz_size_16_color_FFFFFF_t_70]: /images/20211218/df8edac5c7e84c15878315e8e3273957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpd2VuZmVpMTIz_size_16_color_FFFFFF_t_70 1]: /images/20211218/6af7a3931aa34484b7269d2311cbb8e9.png
[20190702160705516.png]: /images/20211218/862abc0b23674c1b9185ae6a0acc64f1.png
[20190702161813104.png]: /images/20211218/9c452c838dad4cf8ad8ea78562d6adee.png