美文网首页
uniapp处理二进制图片流

uniapp处理二进制图片流

作者: 吃肉肉不吃肉肉 | 来源:发表于2021-03-09 11:53 被阅读0次
    方法一:
    <template>
            <view class="">
                <view class="pc-container">
                    <image :src="imgurl" mode=""></image>
                </view>
                <view class="basecolor sharetext">长按二维码发送给代理即可邀请加入</view>
            </view>
    </template>
    <script>
        import $store from '@/store'
        export default {
            data() {      
                return {
                    imgurl:''
                }
            },
            onLoad() {
                uni.request({
                    url: 'http://api.woaidakele.cn/api/AddQrCode',
                    responseType: 'arraybuffer',
                    header: {
                        'Authorization': 'Bearer ' + $store.state.app.token
                    },
                    success: (res) => {
                        const arrayBuffer = res.data
                        this.imgurl = 'data:image/jpeg;base64,'+ uni.arrayBufferToBase64(arrayBuffer)
                    }
                });
            },
            methods: {
                
            },
        }
    </script>
    
    方法二:
    <template>
            <view class="">
                <view class="pc-container">
                    <image :src="imgurl" mode=""></image>
                </view>
                <view class="basecolor sharetext">长按二维码发送给代理即可邀请加入</view>
            </view>
    </template>
    <script>
        import $store from '@/store'
        export default {
            data() {      
                return {
                    imgurl:''
                }
            },
            onLoad() {
                uni.request({
                    url: 'http://api.woaidakele.cn/api/AddQrCode',
                    responseType: 'arraybuffer',
                    header: {
                        'Authorization': 'Bearer ' + $store.state.app.token
                    },
                    success: (res) => {
                        this.imgurl = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res.data)
                    }
                });
            },
            methods: {
                arrayBufferToBase64(buffer) {
                      var binary = ''
                      var bytes = new Uint8Array(buffer)
                      var len = bytes.byteLength
                      for (var i = 0; i < len; i++) {
                        binary += String.fromCharCode(bytes[i])
                      }
                      return window.btoa(binary)
                    }
            },
        }
    </script>
    

    responseType: 'arraybuffer' 这个响应类型必须要写

    相关文章

      网友评论

          本文标题:uniapp处理二进制图片流

          本文链接:https://www.haomeiwen.com/subject/qegvqltx.html