一、问题描述
在平日练习使用uniapp前后端交互的过程中,我们时常会遇到这个问题:通过uni.request从后端接收的数据类型为图片流数据。如果我们直接定义变量并在uni.request的res.data直接赋值的话,我们会发现,最终得到数据竟然是一堆堆乱码。
那么,如何在Uni.request中接收图片流类型的数据并把它展示到屏幕上呢,我们可以借助转换思想。先将得到的数据转换为二进制类型的数据,再将其转换为base64格式的数据,这样可以通过赋值给image组件的src,而把他展示在屏幕上。
二、完整代码展示及解析
success: (res) => {
console.log(res);
if (res.data) {
const base64 = uni.arrayBufferToBase64(res.data);
const imageSrc = 'data:image/png;base64,' + base64;
console.log(imageSrc);
this.myimageSrc = imageSrc;
}
},
fail: (err) => {
console.log(err);
}
如上图所示,res.data就是返回的图片流类型数据。我们先使用unipp官方提供的uni.arrayBufferToBase64这个API将其转换为二进制base64类型的数据,在为其拼接上“data:image/png;base64,”前缀,最后直接将其赋值给image的src属性,即可展示在屏幕上