记录uniapp在App端操作arraybuffer格式的图片流显示不了图片的问题

_Kevi

已于 2023-08-18 10:08:08 修改

阅读量1.6k

点赞数 1

文章标签： uni-app

于 2023-08-17 17:41:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_29385659/article/details/132346037

版权

文章讲述了如何在项目中处理接口返回的图形验证码流，原先是使用Blob对象和URL.createObjectURL在H5环境中正常显示，但在APP端遇到问题。解决方案是将ArrayBuffer转换为Base64字符串以便跨环境展示。

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

因为项目登录需要图形验证，接口直接返回图片流，根据以往做法直接装blod类型是可以显示的

// res arraybuffer 对象集
const blob=new Blob([res],{ type: 'image/jpeg' });
// 创建一个URL对象
const imgUrl=URL.createObjectURL(blob);

但是这种做法在h5正常像是，在app端却无法显示，需要转成base64

 // 将arraybuffer转换为base64字符串
export function arrayBufferToBase64(arrayBuffer) {
  let base64 = "";
  const bytes = new Uint8Array(arrayBuffer);
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    base64 += String.fromCharCode(bytes[i]);
  }
  return `data:image/png;base64,${btoa(base64)}`;
}