外宿申请填写附件上传

This commit is contained in:
2025-12-17 17:51:07 +08:00
parent 27f1a36e56
commit f6e4fb3781

View File

@@ -117,15 +117,20 @@
<view class="form-item">
<label class="form-label">佐证附件</label>
<button type="default" size="mini" @click="chooseAffixFile"
class="upload-btn">选择文件</button>
<!-- <button type="default" size="mini" @click="chooseAffixFile"
class="upload-btn">选择文件</button> -->
<view class="upload-btn" @click="chooseAffixFile">
<text class="upload-icon">+</text>
<text>上传文件</text>
</view>
<view class="file-list" v-if="affixFiles.length">
<view class="file-item" v-for="(file, index) in affixFiles" :key="index">
<text class="file-name">{{ file.name }}</text>
<text class="file-name">{{ file.attachmentName }}</text>
<button size="mini" type="warn" @click="deleteAffixFile(index)"
class="delete-btn">删除</button>
</view>
</view>
<!-- <uni-file-picker :auto-upload="false" @select="chooseAffixFile" @delete="deleteAffixFile"></uni-file-picker> -->
<view class="upload-tip">支持上传jpg/png/pdf格式文件单个文件不超过10MB如病例住房证明等</view>
</view>
@@ -822,28 +827,94 @@
// ========== 文件上传相关 ==========
chooseAffixFile() {
uni.chooseFile({
count: 10,
extension: ['.jpg', '.png', '.pdf'],
success: (res) => {
this.affixFiles = this.affixFiles.concat(res.tempFiles);
this.form.affixId = this.affixFiles.length ? 'uploaded' : '';
// 1. 定义affixId生成工具函数确保uuid唯一性
const generateUUID = () => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
};
res.tempFiles.forEach(file => {
uni.chooseFile({
count: 10, // 最多选择10个文件
// extension: ['.jpg', '.png', '.pdf'], // 可根据需求放开文件类型限制
success: async (chooseRes) => {
// 2. 初始化affixId如果为空则生成唯一ID
if (!this.form.affixId) {
this.form.affixId = generateUUID();
}
// 3. 遍历选择的文件,逐个上传(支持多文件)
for (const file of chooseRes.tempFiles) {
try {
// 4. 构造上传参数(放在循环内,确保每个文件参数正确)
const formDataObj = {
affixId: this.form.affixId,
fileName: file.name,
fileSize: file.size
};
// 5. 上传文件await确保上传完成后再处理下一步
const uploadRes = await uploadFile('/affix/upload', file.path, formDataObj);
const result = typeof uploadRes === 'string' ? JSON.parse(uploadRes) :
uploadRes;
// 6. 上传结果校验
if (result && result.code === 200) {
// 7. 构造文件信息对象(去重逻辑优化)
const fileInfo = {
applyId: this.form.id || '',
attachmentName: file.name,
attachmentUrl: file.path,
attachmentUrl: file.savePath, // 本地路径
serverUrl: result.savePath || '', // 服务器返回的文件路径
fileId: result.id || '', // 服务器返回的文件ID
fileSize: file.size,
fileSuffix: file.name.split('.').pop(),
fileSuffix: file.name.split('.').pop().toLowerCase(),
studentName: this.form.studentName,
studentNo: this.form.studentNo
studentNo: this.form.studentNo,
uploadStatus: 'success' // 上传状态标记
};
const isDuplicate = this.reasonFileList.some(item => item.attachmentUrl ===
file.path);
// 8. 去重逻辑(优化:通过文件名+大小双重校验,避免路径重复问题)
const isDuplicate = this.affixFiles.some(item =>
item.attachmentName === file.name && item.fileSize === file.size
);
if (!isDuplicate) {
this.reasonFileList.push(fileInfo);
this.affixFiles.push(fileInfo);
}
console.log(this.affixFiles);
uni.showToast({
title: `文件 ${file.name} 上传成功`,
icon: 'success',
duration: 1500
});
} else {
// 上传失败处理
uni.showToast({
title: `文件 ${file.name} 上传失败:${result.message || '未知错误'}`,
icon: 'none',
duration: 2000
});
}
} catch (error) {
// 9. 异常捕获(网络错误/上传接口异常)
console.error(`文件 ${file.name} 上传异常:`, error);
uni.showToast({
title: `文件 ${file.name} 上传异常,请重试`,
icon: 'none',
duration: 2000
});
}
}
},
// 10. 取消选择文件的处理
fail: (err) => {
console.error('选择文件失败:', err);
uni.showToast({
title: '选择文件失败,请重试',
icon: 'none'
});
}
});
@@ -1376,6 +1447,7 @@
border-color: #409EFF;
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
}
// 图片上传样式
.upload-btn {
width: 200rpx;