学生资助-问题修复
This commit is contained in:
@@ -93,19 +93,18 @@
|
||||
<view class="form-item">
|
||||
<label class="form-label"><span class="red-tip">*</span>证件照</label>
|
||||
<!-- 编辑模式显示上传组件 -->
|
||||
<view class="upload-container" v-if="type !== 'detail'">
|
||||
<view class="upload-btn" @click="handlePhotoUpload">
|
||||
<text class="upload-icon">+</text>
|
||||
<text>上传文件</text>
|
||||
</view>
|
||||
<view class="file-list" v-if="photoFiles.length">
|
||||
<view class="file-item" v-for="(file, index) in photoFiles" :key="index">
|
||||
<text class="file-name" @click="previewPhoto">{{ file.name }}</text>
|
||||
<uni-icons type="trash-filled" size="30" @click="deletePhoto" class="delete-btn"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-tip">请上传电子版一寸照，支持JPG、PNG格式</view>
|
||||
<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"
|
||||
></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>
|
||||
@@ -523,93 +522,86 @@ import config from "@/config.js";
|
||||
},
|
||||
|
||||
// 处理证件照上传
|
||||
handlePhotoUpload() {
|
||||
handlePhotoUpload(e) {
|
||||
// 如果是详情模式，不执行上传操作
|
||||
if (this.type === 'detail') {
|
||||
return;
|
||||
}
|
||||
|
||||
uni.chooseFile({
|
||||
count: 1, // 最多选择1个文件
|
||||
extension: ['jpg', 'jpeg', 'png'], // 限制文件类型
|
||||
success: async (chooseRes) => {
|
||||
// 遍历选择的文件，逐个上传
|
||||
for (const file of chooseRes.tempFiles) {
|
||||
try {
|
||||
// 检查文件大小（10MB = 10 * 1024 * 1024 bytes）
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 大小超过10MB，请重新选择`,
|
||||
icon: 'none'
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// 检查文件格式
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
const allowedExts = ['jpg', 'jpeg', 'png'];
|
||||
if (!allowedExts.includes(ext)) {
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 格式不支持，请选择 JPG、PNG 格式的文件`,
|
||||
icon: 'none'
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// 上传文件
|
||||
const uploadRes = await uploadFile('/common/upload', file.path);
|
||||
const result = typeof uploadRes === 'string' ? JSON.parse(uploadRes) : uploadRes;
|
||||
|
||||
// 上传结果校验
|
||||
if (result && (result.code === 200 || !result.code)) {
|
||||
// 构造文件信息对象
|
||||
const fileUrl = result.savePath || result.fileName;
|
||||
const fullUrl = this.baseUrl + fileUrl;
|
||||
const fileInfo = {
|
||||
name: file.name,
|
||||
path: fileUrl,
|
||||
url: fullUrl
|
||||
};
|
||||
|
||||
// 更新 formData.pic
|
||||
this.formData.pic = fileUrl;
|
||||
|
||||
// 更新 photoFiles 数组
|
||||
this.photoFiles = [fileInfo];
|
||||
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 上传成功`,
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
});
|
||||
} else {
|
||||
// 上传失败处理
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 上传失败：${result.message || '未知错误'}`,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
// 异常捕获
|
||||
console.error(`文件 ${file.name} 上传异常：`, error);
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 上传异常：${error.message || '请检查网络连接'}`,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// 取消选择文件的处理
|
||||
fail: (err) => {
|
||||
console.error('选择文件失败：', err);
|
||||
const tempFiles = e.tempFilePaths || [];
|
||||
|
||||
// 遍历选择的文件，逐个上传
|
||||
for (const file of e.tempFiles) {
|
||||
this.uploadFile(file);
|
||||
}
|
||||
},
|
||||
|
||||
// 上传文件的通用方法
|
||||
async uploadFile(file) {
|
||||
try {
|
||||
// 检查文件大小（5MB = 5 * 1024 * 1024 bytes）
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
uni.showToast({
|
||||
title: '选择文件失败，请重试',
|
||||
title: `文件 ${file.name} 大小超过5MB，请重新选择`,
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// 检查文件格式
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
const allowedExts = ['jpg', 'jpeg', 'png'];
|
||||
if (!allowedExts.includes(ext)) {
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 格式不支持，请选择 JPG、PNG 格式的文件`,
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 上传文件
|
||||
const uploadRes = await uploadFile('/common/upload', file.path);
|
||||
const result = typeof uploadRes === 'string' ? JSON.parse(uploadRes) : uploadRes;
|
||||
|
||||
// 上传结果校验
|
||||
if (result && (result.code === 200 || !result.code)) {
|
||||
// 构造文件信息对象
|
||||
const fileUrl = result.savePath || result.fileName;
|
||||
const fullUrl = this.getFullImageUrl(fileUrl);
|
||||
const fileInfo = {
|
||||
name: file.name,
|
||||
path: fileUrl,
|
||||
url: fullUrl
|
||||
};
|
||||
|
||||
// 更新 formData.pic
|
||||
this.formData.pic = fileUrl;
|
||||
|
||||
// 更新 photoFiles 数组，确保 uni-file-picker 组件能获取预览路径
|
||||
this.photoFiles = [fileInfo];
|
||||
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 上传成功`,
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
});
|
||||
} else {
|
||||
// 上传失败处理
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 上传失败：${result.message || '未知错误'}`,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
// 异常捕获
|
||||
console.error(`文件 ${file.name} 上传异常：`, error);
|
||||
uni.showToast({
|
||||
title: `文件 ${file.name} 上传异常：${error.message || '请检查网络连接'}`,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 删除证件照
|
||||
@@ -1487,6 +1479,11 @@ import config from "@/config.js";
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 证件照上传容器 */
|
||||
.example-body {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 照片预览容器 */
|
||||
.photo-preview-container {
|
||||
margin-top: 20rpx;
|
||||
|
||||
Reference in New Issue
Block a user