uni-app 二进制流转图片

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 二进制流转图片

获取微信小程序的分享二维码显示在app上,请求小程序的接口拿到的是二进制流,通过设置responseType:“arraybuffer”,获取到一个buffer对象,然后通过Uint8Array对象转一下,打印出来中间会有当前的一个时间,导致后面转base64的地址无效
为什么中间会有这么个时间在这里呢,求大佬帮忙出个解决办法

Harmonyos Next教程
6 回复

你好


你好

问题解决了吗，同问

我的是app，接口返回二进制，如何把二进制流转换为图片

回复 [已删除]: 解决了，我的是因为在rsa加密时有中文导致了，这个rsa不能加密字符串较长的字符，所以后来换成长字符串加密的插件就好了

在处理 uni-app 中二进制流转图片的需求时，通常涉及到从后端接收二进制数据流，并将其转换为可在前端显示的图片。以下是一个简化的示例，展示如何在 uni-app 中实现这一过程。

后端（假设使用Node.js + Express）

首先，确保后端能够发送二进制图片数据。以下是一个简单的Node.js服务器示例，使用Express框架发送图片文件：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

app.get('/image', (req, res) => {
    const imagePath = path.join(__dirname, 'path_to_your_image.jpg');
    fs.readFile(imagePath, (err, data) => {
        if (err) {
            res.status(500).send('Error reading image file');
        } else {
            res.type('image/jpeg');
            res.send(data);
        }
    });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

前端（uni-app）

在 uni-app 中，你可以使用 uni.request 方法来请求二进制数据，并将其转换为Base64编码或直接展示为图片。以下是一个示例：

// 在页面的methods中添加请求图片的函数
methods: {
    getImage() {
        uni.request({
            url: 'http://localhost:3000/image',
            method: 'GET',
            responseType: 'arraybuffer', // 关键：指定响应类型为arraybuffer
            success: (res) => {
                const base64 = uni.arrayBufferToBase64(res.data);
                const imgSrc = 'data:image/jpeg;base64,' + base64;
                this.imageData = imgSrc; // 假设页面data中有一个imageData属性用于绑定图片
            },
            fail: (err) => {
                console.error('Failed to fetch image:', err);
            }
        });
    }
}

页面模板

在页面的模板中，你可以使用 v-bind:src 来绑定图片数据：

<template>
    <view>
        <image v-bind:src="imageData" mode="widthFix"></image>
        <button @click="getImage">获取图片</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imageData: ''
        };
    },
    methods: {
        // 上述getImage方法
    }
};
</script>

以上代码展示了如何在 uni-app 中请求并显示来自后端的二进制图片数据。注意，实际开发中可能需要对图片路径、错误处理等进行更多的调整和优化。

回到顶部