uniapp+＜script setup lang=“ts“＞解析后端返回的图片流并将二维码展示在页面中

页面展示

apiFox请求

封装公用的ts

import config from '@/../config/config';
const URL = `${config.apiDomain}${config.apiBase}/order/genVerificationQr`;
interface GenQrParams {orderNo: string;width: number;height: number;
}// 生成核销二维码接口
export const genVerificationQr = (params: GenQrParams) => {const accessToken = uni.getStorageSync('access_token');return new Promise<string>((resolve, reject) => {uni.request({url: `${URL}`, // 注意补充完整的接口URLmethod: 'GET',header: {Authorization: 'Bearer ' + accessToken,},data: params,responseType: 'arraybuffer',success: (res) => {if (res.statusCode === 200 && res.data) {try {// 将arraybuffer转换为base64格式const base64Str = wx?.arrayBufferToBase64(res.data as ArrayBuffer);if (!base64Str) {throw new Error('转换base64失败');}// 生成正确的dataURL（根据实际图片类型调整mime类型，这里假设是png）const imageSrc = `data:image/png;base64,${base64Str}`;resolve(imageSrc); // 成功时返回imageSrc} catch (err) {reject(err); // 转换过程出错时 reject}} else {reject(new Error(`请求失败，状态码：${res.statusCode}`));}},fail: (err) => {reject(err); // 网络请求失败时 reject},});});
};

页面使用

<template><view class="qr-code-box flex-column-center"><image :src="currentImg" class="qr-code-img" /><view class="qr-code-text">请将此二维码呈现给工作人员为您核销订单</view></view>
</template><script setup lang="ts">
import { onMounted, nextTick } from 'vue';
import { genVerificationQr } from '@/utils/createQrCode'; 
interface PropsType {orderNo: any;
}
const props = withDefaults(defineProps<PropsType>(), {orderNo: 0,
});
const { orderNo } = toRefs(props);const getGenVerificationQr = async () => {currentImg.value = ''; //每次请求前置空let params = {orderNo: orderNo.value,width: 200,height: 200,};nextTick(async () => {// 调用接口生成二维码const qrImageSrc = await genVerificationQr(params);// 将结果赋值给页面的image srccurrentImg.value = qrImageSrc; // 假设页面中有qrImage这个数据变量});
};onMounted(() => {getGenVerificationQr();
});</script><style lang="scss">
@import './index.scss';
</style>