uni-app 小程序后端返回二进制流图片显示

1. 后端返回的二进制流图片

在这里插入图片描述

2. 处理 uni-app 代码

设置请求方式,responseType: 'arraybuffer'
通过new Uint8Array(res.data) 获取格式化后的图片
通过拼接生成 base64 的图片数据

2.1 html显示

<img v-if="userPhoto" :src="userPhoto" alt="">

2.2 uni.request 请求获取二进制流图片

uni.request({
	url: config.baseUrl + config.api_attachmentFile,//url地址
	method: 'GET',
	responseType: 'arraybuffer',
	data: {
		fileId: this.user.photo,
		wxToken: uni.getStorageSync('wx_token') || store.state.wx_token,
	},
	header: {
		'Content-Type': 'application/json',
		'wxToken': uni.getStorageSync('wx_token') || store.state.wx_token,
	},
	success: res => {
		const arrayBuffer = new Uint8Array(res.data)
		const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrayBuffer) //这里需要添加前缀
		this.userPhoto = base64 || ''
	}
});

3. 页面头像显示

在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:酷酷鲨 设计师:CSDN官方博客 返回首页

打赏作者

范特西是只猫

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值