xgxt_sd/zhxg_app
19
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

学生资助-修复图片文件预览问题

Browse Source
This commit is contained in:
weishengyou
2026-03-05 14:37:37 +08:00
parent 6fb7c809cb
commit b6337714cc
4 changed files with 309 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
pages/finance/knzzGl/apply.vue
View File

@@ -82,20 +82,28 @@
<label class="form-label"><span class="red-tip">*</span>入学时间</label>
<input v-model="formData.inTime" placeholder="请输入入学时间" class="form-input" :disabled="type === 'detail'" ></input>
</view>
<!-- <view class="form-item">
<label class="form-label"><span class="red-tip">*</span>证件照</label>
<view class="example-body">
<uni-file-picker
@select="handlePhotoUpload"
@delete="deletePhoto"
:auto-upload="false"
limit="1"
:disabled="type === 'detail'"
mode="grid"
></uni-file-picker>
<view class="form-item">
<label class="form-label"><span class="red-tip">*</span>证件照</label>
<!-- 编辑模式显示上传组件 -->
<view class="example-body" v-if="type !== 'detail'">
<uni-file-picker
@select="handlePhotoUpload"
@delete="deletePhoto"
:auto-upload="false"
limit="1"
:disabled="type === 'detail'"
mode="grid"
:value="filePickerValue"
preview-full-image
image-mode="aspectFill"
></uni-file-picker>
</view>
<view class="upload-tip" v-if="type !== 'detail'">支持上传jpg/png格式照片，单个文件不超过5MB</view>
<!-- 详情模式显示照片预览 -->
<view class="photo-preview-container" v-if="formData.pic && type === 'detail'">
<image :src="getFullImageUrl(formData.pic)" mode="aspectFill"></image>
</view>
</view>
<view class="upload-tip" v-if="type !== 'detail'">支持上传jpg/png格式照片，单个文件不超过5MB</view>
</view> -->
<view class="form-item">
<label class="form-label">曾获资助/奖励</label>
<textarea v-model="formData.helpHis" placeholder="请输入曾获资助或奖励情况" class="form-textarea" rows="3" :disabled="type === 'detail'" ></textarea>
@@ -289,6 +297,7 @@
import { getOwnSign } from '@/api/workStudy/post';
import { getOwnKnrd, getOwnExtraInfo, getOwnInfo as getOwnStuInfo } from '@/api/finance/special';
import uploadFile from "@/plugins/upload.js"
import config from '@/config'
export default {
data() {
return {
@@ -354,7 +363,7 @@
},
affixFiles: [],
signImg: '',
baseUrl: uni.getStorageSync('baseUrl')
baseUrl: config.baseUrl || ''
};
},
onLoad(option) {
@@ -382,6 +391,18 @@
onShow() {
this.calculateFormHeight();
},
computed: {
filePickerValue() {
if (this.formData.pic) {
return [{
url: this.getFullImageUrl(this.formData.pic),
name: '证件照',
size: 0
}];
}
return [];
}
},
methods: {
// 计算表单滚动区域高度
calculateFormHeight() {
@@ -639,6 +660,22 @@
};
});
}
// 处理证件照
if (this.formData.pic) {
// 从文件路径中提取文件名
const fileName = this.formData.pic.split('/').pop();
// 构造完整的图片URL
const fullUrl = this.getFullImageUrl(this.formData.pic);
// 更新 photoFiles 数组，使 uni-file-picker 组件能够预览图片
this.photoFiles = [{
name: fileName,
path: this.formData.pic,
url: fullUrl
}];
console.log('处理证件照，formData.pic:', this.formData.pic);
console.log('fullUrl:', fullUrl);
console.log('photoFiles:', this.photoFiles);
}
}).catch(error => {
console.error('获取详情失败:', error);
uni.showToast({
@@ -951,7 +988,18 @@
// 处理证件照上传
handlePhotoUpload(e) {
const file = e.tempFile;
// 检查事件参数格式
console.log('handlePhotoUpload 事件参数:', e);
// 从事件参数中获取文件信息
const file = e.tempFiles ? e.tempFiles[0] : e.tempFile;
if (!file) {
uni.showToast({
title: '获取文件信息失败',
icon: 'none'
});
return;
}
// 检查文件大小
if (file.size > 5 * 1024 * 1024) {
@@ -974,11 +1022,33 @@
uni.showLoading({ title: '上传中...' });
uploadFile('/common/upload', file.path).then((res) => {
// 获取文件路径
const filePath = file.path || file.tempFilePath;
if (!filePath) {
uni.showToast({
title: '获取文件路径失败',
icon: 'none'
});
return;
}
uploadFile('/common/upload', filePath).then((res) => {
uni.hideLoading();
const result = typeof res === 'string' ? JSON.parse(res) : res;
if (result && result.code === 200) {
this.formData.pic = result.fileName || result.savePath;
// 构造完整的图片URL
const fullUrl = this.getFullImageUrl(this.formData.pic);
// 更新 photoFiles 数组，使 uni-file-picker 组件能够预览图片
this.photoFiles = [{
name: file.name,
path: filePath,
url: fullUrl
}];
console.log('上传成功，formData.pic:', this.formData.pic);
console.log('fullUrl:', fullUrl);
console.log('filePickerValue:', this.filePickerValue);
console.log('photoFiles:', this.photoFiles);
uni.showToast({
title: '证件照上传成功',
icon: 'success'
@@ -1006,6 +1076,27 @@
title: '证件照已删除',
icon: 'success'
});
},
// 获取完整图片URL
getFullImageUrl(path) {
if (!path) return '';
// 调试信息
console.log('getFullImageUrl调用，path:', path);
// 如果已经是完整URL，则直接返回
if (path.startsWith('http://') || path.startsWith('https://')) {
return path;
}
// 使用配置文件中的baseUrl
const currentBaseUrl = config.baseUrl || '';
console.log('当前baseUrl:', currentBaseUrl);
// 处理baseUrl，确保结尾没有斜杠
const baseUrlClean = currentBaseUrl.replace(/\/$/, '');
// 处理path，确保开头没有斜杠
const pathClean = path.replace(/^\//, '');
// 拼接URL
const fullUrl = `${baseUrlClean}/${pathClean}`;
console.log('拼接后的完整URL:', fullUrl);
return fullUrl;
}
}
};
@@ -1231,8 +1322,19 @@
}
.example-body {
margin-top: 10rpx;
}
margin-top: 10rpx;
}
.photo-preview-container {
margin-top: 20rpx;
border-radius: 8rpx;
overflow: hidden;
}
.photo-preview-container image {
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
}
.sign {
width: 200px;