在uniapp中,不支持直接使用createObjectURL
来预览图片。相反,我们可以使用uni.previewImage
方法来预览图片。
// 在页面中定义一个变量用来存储图片的URL
data() {
return {
imgUrl: ''
}
},
methods: {
// 在方法中发送请求获取文件流并展示为图片
getFileAndShowImage() {
uni.request({
url: 'your_api_url',
method: 'GET',
responseType: 'arraybuffer', // 设置响应类型为二进制流 此处注意uni.request中responseType仅支持text、arraybuffer 所以不能用blob
success: (res) => {
// 将返回的二进制流转换为base64格式的图片
let base64Img = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res.data);
// 将base64格式的图片赋值给imgUrl变量,用于在页面上展示
this.imgUrl = base64Img;
// 点击按钮时预览图片
uni.previewImage({
urls: [base64Img]
});
}
});
}
}
在上述示例中,我们通过uni.previewImage
方法来预览图片,而不是使用createObjectURL
。当用户点击按钮时,将触发getFileAndShowImage
方法,该方法发送请求获取文件流并展示为图片,然后使用uni.previewImage
来预览图片。