uniapp 小程序获取后端接口的流文件图片转换成图片并显示
uniapp 小程序获取后端的二进制流显示图片
uni.request({ url: "https://xxx.xxx.cn/bank/file/xxx/aeb9beb4fb2444ff80d47ed11c18b991.jpg", method: 'GET', responseType: 'arraybuffer', header:{ Authorization:"Bearer e2589fc8-8748-481b-8ec4-c63df33e4371" }, success: res => { let datas = res.data; this.codeUrl = 'data:image/png;base64,'+uni.arrayBufferToBase64(datas); }, });
主要就是将响响应的数据类型修改成 arraybuffer
最后使用uni.arrayBufferToBase64()方法将 ArrayBuffer 对象转成 Base64 字符串
<image :src="`${codeUrl}`" ></image>
因为bas64只能显示不能下载,所以得将它转化成一个图片。
以下是在其他地方找到的一个将bas64图片下载功能的组件
<template> <!-- 预览图片 --> <view class="preview-photo-box flex-box"> <view class="item tc"> <image class="receive-qrcode-img" :src="url" mode="widthFix" @longtap="toSave"></image> </view> </view> </template> <script> export default { props: { url: { type: String, default: '' } }, data() { return {}; }, methods: { hide() { this.$emit('hide'); }, saveImgFile() { let base64 = this.url; const bitmap = new plus.nativeObj.Bitmap("test"); bitmap.loadBase64Data(base64, function() { const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式 console.log('saveHeadImgFile', url) bitmap.save(url, { overwrite: true, // 是否覆盖 // quality: 'quality' // 图片清晰度 }, (i) => { uni.saveImageToPhotosAlbum({ filePath: url, success: function() { uni.showToast({ title: '图片保存成功', icon: 'none' }) bitmap.clear() } }); }, (e) => { uni.showToast({ title: '图片保存失败', icon: 'none' }) bitmap.clear() }); }, (e) => { uni.showToast({ title: '图片保存失败', icon: 'none' }) bitmap.clear() }); }, toSave() { uni.showModal({ title: '图片保存', content: '确定要保存图片吗', success: e => { if (e['confirm']) { this.saveImgFile(); } } }); } } }; </script> <style lang="scss"> .preview-photo-box { width: 100%; height: 100%; z-index: 99; justify-content: center; align-items: center; .item { .receive-qrcode-img { position: relative; z-index: 2; width: 224upx; height: 224upx; margin: 0 auto; } } } </style>
本文来自博客园,作者:三线码工,转载请注明原文链接:https://www.cnblogs.com/shangrao/p/15958594.html