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((resolve, reject) => {
uni.request({
url: `${URL}`, // 注意补充完整的接口URL
method: '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
},
});
});
};

页面使用

请将此二维码呈现给工作人员为您核销订单
import { onMounted, nextTick } from 'vue';
import { genVerificationQr } from '@/utils/createQrCode';
interface PropsType {
orderNo: any;
}
const props = withDefaults(defineProps(), {
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 src
currentImg.value = qrImageSrc; // 假设页面中有qrImage这个数据变量
});
};
onMounted(() => {
getGenVerificationQr();
});
@import './index.scss';