<template>
<view class="container">
<!-- 头部区域 -->
<cover-view class="cover-header">
<cover-view class="cover-title">预览界面</cover-view>
</cover-view>
<!-- web-view 区域 -->
<web-view :src="previewUrl"></web-view>
<!-- 底部按钮区域 -->
<cover-view class="bottom-btn-container">
<cover-view class="btn" @click="handleGiveUp">放弃</cover-view>
<cover-view class="btn" @click="handleSolidify">固化</cover-view>
</cover-view>
</view>
</template>
<script>
export default {
data() {
return {
previewUrl: '',
pdfPath: '',
savedPdfUrl: '',
base64PdfData: ''
};
},
onLoad(options) {
const pdfPath = decodeURIComponent(options.url);
this.previewUrl = `/static/pdf-preview.html?pdfUrl=${encodeURIComponent(pdfPath)}`;
this.pdfPath = pdfPath;
},
methods: {
handleGiveUp() {
uni.navigateBack({
delta: 1
});
},
handleSolidify() {
if (!this.pdfPath) {
uni.showToast({ title: 'PDF路径为空', icon: 'none' });
return;
}
uni.showLoading({ title: '固化中' });
uni.downloadFile({
url: this.pdfPath,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
const tempFilePath = downloadRes.tempFilePath;
console.log('文件下载成功:', tempFilePath);
console.log('开始上传到: http://192.168.1.80:159:1592/api/upload');
uni.uploadFile({
url: 'http://192.168.1.80:1592/api/upload',
// url: 'http://192.168.0.113:1592/api/upload',
filePath: tempFilePath,
name: 'file',
formData: { timestamp: new Date().getTime() },
success: (uploadRes) => {
console.log('上传响应状态:', uploadRes.statusCode);
console.log('响应头:', uploadRes.header);
console.log('原始响应数据:', uploadRes.data);
let response;
try {
// 兼容多平台
response = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data;
} catch (e) {
console.error('解析错误:', e);
uni.showToast({
title: '解析响应失败，请检查服务器返回格式',
icon: 'none',
duration: 3000
});
return;
}
// 检查是否为有效对象
if (typeof response !== 'object' || response === null) {
console.warn('无效的响应格式:', response);
uni.showToast({
title: '服务器返回了无效数据格式',
icon: 'none',
duration: 3000
});
return;
}
// 处理有效响应
if (response.code == 200) {
const base64PdfData = response.data;
if (!base64PdfData) {
console.error('无效的PDF地址:', base64PdfData);
uni.showToast({
title: '服务器未返回PDF地址',
icon: 'none'
});
console.error('服务器响应:', response);
return;
}
console.log('服务器返回的PDF URL:', base64PdfData);
uni.navigateTo({ url: '/pages/home/home' });
uni.base64ToPath({
base64Data: base64PdfData, // 纯Base64字符串（不含data:前缀）
fileType: 'pdf' // 指定文件类型为PDF
})
.then((res) => {
const tempPdfPath = res.tempFilePath; // 转换后的本地临时路径
console.log('Base64转PDF成功:', tempPdfPath);
// 保存证据信息到本地缓存（供evidence页面使用）
const evidenceInfo = {
uploadTime: new Date().getTime(), // 记录上传时间
pdfUrl: tempPdfPath
};
uni.setStorageSync('currentEvidence', evidenceInfo);
// 显示成功弹窗并跳转
uni.showModal({
title: '固化成功!',
content: '您的证据原件保存在“我的证据”中，导出方法详见《使用说明》',
confirmText: '查看证据',
cancelText: '继续取证',
success: (res) => {
if (res.confirm) {
// 携带本地PDF路径跳转至evidence页面
uni.navigateTo({
url: `/pages/home/components/evidence?pdfUrl=${encodeURIComponent(tempPdfPath)}`
});
}
}
});
})
.catch((err) => {
console.error('Base64转换失败:', err);
uni.showToast({ title: '证书转换失败', icon: 'none' });
});
} else {
uni.showToast({
title: PdfResult.message || '固化失败',
icon: 'none',
duration: 3000
});
}
},
fail: (err) => {
console.error('上传失败:', err);
uni.showToast({
title: `上传失败: ${err.errMsg || '未知错误'}`,
icon: 'none',
duration: 3000
});
},
complete: () => {
uni.hideLoading();
}
});
} else {
uni.showToast({
title: `下载失败: ${downloadRes.statusCode}`,
icon: 'none'
});
}
},
fail: (err) => {
console.error('下载失败:', err);
uni.showToast({
title: `下载失败: ${err.errMsg || '未知错误'}`,
icon: 'none',
duration: 3000
});
uni.hideLoading();
}
});
}
}
};
</script>
<style>
.container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.cover-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #2e8bff;
height: 130rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding-bottom: 10rpx;
}
.cover-title {
color: #ffffff;
font-size: 32rpx;
font-weight: bold;
}
web-view {
position: absolute;
top: 44px;
bottom: 64px;
width: 100%;
}
.bottom-btn-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: #2e8bff;
/* background-color: rgba(0, 0, 0, 0.3); */
z-index: 999;
}
.btn {
width: 45%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #2e8bff;
color: #fff;
font-size: 32rpx;
border-radius: 10rpx;
margin: 20rpx 0;
}
</style>
这是webview组件 固化成功后 跳转到 首页 弹窗查看证据和继续取证 点击查看证据跳到evidence组件
跳转时将后端获取的内容转换为base64字节数组 展示在evidence组件里 完整修改
本文解决使用FlexAnt编译FlexBuilder项目时出现的无法解析资源路径错误，通过在相对路径前加/解决了问题，并提供了详细的解决步骤和参考链接。
扫一扫
3532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
