uniapp H5项目 获取接口的二进制流转化成图片url(base64)

本文介绍了在使用uniapp开发时,如何从接口获取数据并将其转换为base64格式的图片URL,以便于在页面上显示验证码图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果你使用的是uniapp,
并且你从接口获取下来的数据长这样:

在这里插入图片描述
想要把取到的数据展示成图片,那么你可以这样做:

    // 这是我们的项目封装的请求方法
    const res = await this.$api.getKaptcha({
       originResponse: true, // 这样写是为了在request那边特殊处理,目的是为了获取header里的数据 如果你不需要可以不写
       responseType: 'arraybuffer', // 这里一定要写 这样才能把数据转成arrayBuffer格式的
       params: { type: '1' } // 这里是我们的接口需要的参数
     })
     const { header, data } = res 
     this.key= header.captchakey // 验证码key  // 这里是我们项目这里需要从接口获取的额外数据
     this.codeUrl = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(data) // 获取到url


    
// 图片展示
	<uv-image
      :src="codeUrl"
       width="100"
       height="32"
    ></uv-image>
### 将图片文件转换Base64 编码 在 UniApp H5 环境中,可以利用 FileReader API 来实现将图片文件读取并转换Base64 字符串。此方法适用于处理用户上传的图片或其他形式获取到的 File 对象。 以下是具体实现方式: #### HTML 部分 为了方便测试,这里提供了一个简单的输入框用于选择本地图片文件。 ```html <input type="file" id="uploadImage" accept="image/*"> <div id="result"></div> ``` #### JavaScript 实现逻辑 通过监听文件输入控件的变化事件来触发图片Base64转换过程。 ```javascript document.getElementById('uploadImage').addEventListener('change', function(event){ let files = event.target.files; if(files.length === 0) { console.log("未选择任何文件"); return; } let reader = new FileReader(); // 当readAsDataURL完成时会触发loadend事件,在回调函数里可以获得base64编码后的字符串 reader.onloadend = function(e) { document.getElementById('result').innerText = e.target.result; // 显示结果 console.log("Base64 string:", e.target.result); }; // 开始异步读取指定的 Blob 或 File 内容作为 data URL 形式的 Base64 编码字符串 reader.readAsDataURL(files[0]); }); ``` 上述代码展示了如何捕获用户的文件选择操作,并使用 `FileReader` 类中的 `readAsDataURL()` 方法把选中的图像文件转化为 Data URL 格式的数据流,即包含了 MIME 类型前缀(如 "data:image/png;base64,")以及后续跟随的实际 Base64 编码数据[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值