外宿申请填写附件上传
This commit is contained in:
@@ -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 => {
|
||||
const fileInfo = {
|
||||
applyId: this.form.id || '',
|
||||
attachmentName: file.name,
|
||||
attachmentUrl: file.path,
|
||||
fileSize: file.size,
|
||||
fileSuffix: file.name.split('.').pop(),
|
||||
studentName: this.form.studentName,
|
||||
studentNo: this.form.studentNo
|
||||
};
|
||||
const isDuplicate = this.reasonFileList.some(item => item.attachmentUrl ===
|
||||
file.path);
|
||||
if (!isDuplicate) {
|
||||
this.reasonFileList.push(fileInfo);
|
||||
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.savePath, // 本地路径
|
||||
serverUrl: result.savePath || '', // 服务器返回的文件路径
|
||||
fileId: result.id || '', // 服务器返回的文件ID
|
||||
fileSize: file.size,
|
||||
fileSuffix: file.name.split('.').pop().toLowerCase(),
|
||||
studentName: this.form.studentName,
|
||||
studentNo: this.form.studentNo,
|
||||
uploadStatus: 'success' // 上传状态标记
|
||||
};
|
||||
|
||||
// 8. 去重逻辑（优化：通过文件名+大小双重校验，避免路径重复问题）
|
||||
const isDuplicate = this.affixFiles.some(item =>
|
||||
item.attachmentName === file.name && item.fileSize === file.size
|
||||
);
|
||||
|
||||
if (!isDuplicate) {
|
||||
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'
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -886,10 +957,10 @@
|
||||
this.form.parentSignAttachment = JSON.parse(res).fileName;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
previewImage(url) {
|
||||
uni.previewImage({
|
||||
@@ -1376,6 +1447,7 @@
|
||||
border-color: #409EFF;
|
||||
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
// 图片上传样式
|
||||
.upload-btn {
|
||||
width: 200rpx;
|
||||
@@ -1390,25 +1462,25 @@
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.upload-icon {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.upload-tip {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.upload-preview {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.upload-preview image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Reference in New Issue
Block a user