外宿申请填写附件上传

pages/dormitory/outsideAccommodation/applicationForm.vue

@@ -117,15 +117,20 @@
 
 							<view class="form-item">
 								<label class="form-label">佐证附件</label>
-								<button type="default" size="mini" @click="chooseAffixFile"
+								<!-- <button type="default" size="mini" @click="chooseAffixFile"
-									class="upload-btn">选择文件</button>
+									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({
+				// 1. 定义affixId生成工具函数（确保uuid唯一性）
-					count: 10,
+				const generateUUID = () => {
-					extension: ['.jpg', '.png', '.pdf'],
+					return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-					success: (res) => {
+						const r = Math.random() * 16 | 0;
-						this.affixFiles = this.affixFiles.concat(res.tempFiles);
+						const v = c === 'x' ? r : (r & 0x3 | 0x8);
-						this.form.affixId = this.affixFiles.length ? 'uploaded' : '';
+						return v.toString(16);
+					});
+				};
 
-						res.tempFiles.forEach(file => {
+				uni.chooseFile({
-							const fileInfo = {
+					count: 10, // 最多选择10个文件
-								applyId: this.form.id || '',
+					// extension: ['.jpg', '.png', '.pdf'], // 可根据需求放开文件类型限制
-								attachmentName: file.name,
+					success: async (chooseRes) => {
-								attachmentUrl: file.path,
+						// 2. 初始化affixId（如果为空则生成唯一ID）
-								fileSize: file.size,
+						if (!this.form.affixId) {
-								fileSuffix: file.name.split('.').pop(),
+							this.form.affixId = generateUUID();
-								studentName: this.form.studentName,
+						}
-								studentNo: this.form.studentNo
+
-							};
+						// 3. 遍历选择的文件，逐个上传（支持多文件）
-							const isDuplicate = this.reasonFileList.some(item => item.attachmentUrl ===
+						for (const file of chooseRes.tempFiles) {
-								file.path);
+							try {
-							if (!isDuplicate) {
+								// 4. 构造上传参数（放在循环内，确保每个文件参数正确）
-								this.reasonFileList.push(fileInfo);
+								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%;