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

如果你使用的是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>

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-04-20 14:54:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-20 14:54:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-20 14:54:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-20 14:54:05       20 阅读

热门阅读

  1. 深入理解C#委托:为什么及如何使用委托

    2024-04-20 14:54:05       16 阅读
  2. vue3滚动条重置

    2024-04-20 14:54:05       13 阅读
  3. Linux嵌入式驱动开发-内核定时器

    2024-04-20 14:54:05       16 阅读
  4. mybatis快速入门-注解版

    2024-04-20 14:54:05       15 阅读
  5. linux捕获特定的信号并打印堆栈信息

    2024-04-20 14:54:05       15 阅读
  6. kubernets 节点数量限制修改

    2024-04-20 14:54:05       12 阅读
  7. 一篇文章了解向量数据库

    2024-04-20 14:54:05       14 阅读
  8. 关系数据库设计的基本步骤及其产物

    2024-04-20 14:54:05       10 阅读