简历上传功能开发

This commit is contained in:
冯辉
2025-11-04 14:30:40 +08:00
parent 95b9c1cc29
commit 66d1122dea

View File

@@ -122,7 +122,7 @@
</view> </view>
<!-- 4. 新增简历上传区域固定在页面底部 --> <!-- 4. 新增简历上传区域固定在页面底部 -->
<!-- <view class="resume-upload-section"> <view class="resume-upload-section">
<button class="upload-btn" @click="handleResumeUpload" :loading="isUploading" :disabled="isUploading"> <button class="upload-btn" @click="handleResumeUpload" :loading="isUploading" :disabled="isUploading">
<uni-icons type="cloud-upload" size="20"></uni-icons> <uni-icons type="cloud-upload" size="20"></uni-icons>
<text class="upload-text"> <text class="upload-text">
@@ -138,7 +138,7 @@
<text class="file-name">{{ uploadedResumeName }}</text> <text class="file-name">{{ uploadedResumeName }}</text>
<button class="delete-file-btn" size="mini" @click.stop="handleDeleteResume">删除</button> <button class="delete-file-btn" size="mini" @click.stop="handleDeleteResume">删除</button>
</view> </view>
</view> --> </view>
</view> </view>
</template> </template>
@@ -267,12 +267,202 @@ const handleDeleteItem = async (item, index) => {
}; };
// 简历上传核心逻辑 // 简历上传核心逻辑
const handleResumeUpload = () => {}; const handleResumeUpload = () => {
// 从缓存获取用户ID参考首页实现方式
// 优先从store获取如果为空则从缓存获取
const storeUserId = userInfo.value?.userId;
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
const cachedUserId = cachedUserInfo.userId;
// 获取用户ID优先使用store中的userId如果store中没有使用缓存中的userId
const userId = storeUserId || cachedUserId;
if (!userId) {
$api.msg('请先登录');
return;
}
// 检查是否正在上传
if (isUploading.value) {
return;
}
// 选择文件(微信小程序使用 wx.chooseMessageFileuni-app 中对应 uni.chooseMessageFile
uni.chooseMessageFile({
count: 1, // 只能选择一个文件
type: 'file', // 选择任意文件类型
success: (res) => {
// 注意:文件路径在 res.tempFiles[0].path
const file = res.tempFiles[0];
const tempFilePath = file.path; // 获取临时文件路径
const fileName = file.name; // 获取文件名
// 检查文件大小20MB = 20 * 1024 * 1024 字节)
const maxSize = 20 * 1024 * 1024;
if (file.size > maxSize) {
$api.msg('文件大小不能超过 20MB');
return;
}
// 检查文件类型
const allowedTypes = ['pdf', 'doc', 'docx'];
const fileExtension = fileName.split('.').pop()?.toLowerCase();
if (!fileExtension || !allowedTypes.includes(fileExtension)) {
$api.msg('仅支持 PDF、Word 格式');
return;
}
// 开始上传
uploadResumeFile(tempFilePath, fileName, userId);
},
fail: (err) => {
console.error('选择文件失败:', err);
// 用户取消选择不提示错误
if (err.errMsg && !err.errMsg.includes('cancel')) {
$api.msg('选择文件失败,请重试');
}
}
});
};
// 上传简历文件到服务器(使用 wx.uploadFileuni-app 中对应 uni.uploadFile
const uploadResumeFile = (filePath, fileName, userId) => {
// 确保 userId 存在且有效
if (!userId) {
// 如果传入的userId为空尝试从缓存再次获取
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
const cachedUserId = cachedUserInfo.userId;
if (!cachedUserId) {
$api.msg('用户ID不存在无法上传');
return;
}
// 使用缓存中的userId
userId = cachedUserId;
}
isUploading.value = true;
// 获取token从缓存获取参考首页实现方式
let Authorization = '';
const tokenValue = uni.getStorageSync('token') || '';
if (tokenValue) {
Authorization = tokenValue;
} else {
// 如果缓存中没有token尝试从store获取
const userStore = useUserStore();
if (userStore.token) {
Authorization = userStore.token;
}
}
// 根据接口文档bussinessId 应该作为 Query 参数传递,而不是 formData
// 将 bussinessId 拼接到 URL 上作为查询参数
const uploadUrl = `${config.baseUrl}/app/file/upload?bussinessId=${encodeURIComponent(String(userId))}`;
// 打印调试信息
console.log('上传文件参数:', {
url: uploadUrl,
fileName: fileName,
bussinessId: userId,
userId: userId,
token: Authorization ? '已获取' : '未获取'
});
// 上传文件(参考微信小程序 wx.uploadFile API
uni.uploadFile({
url: uploadUrl, // 开发者服务器的上传接口(必须是 HTTPSbussinessId 作为 Query 参数
filePath: filePath, // 本地文件路径(临时路径)
name: 'file', // 服务器端接收文件的字段名(需与后端一致)
// 注意根据接口文档bussinessId 通过 Query 参数传递,不需要 formData
header: {
'Authorization': encodeURIComponent(Authorization)
},
success: (uploadRes) => {
try {
// 注意res.data 是字符串,需转为 JSON如果后端返回 JSON
// 参考方案const result = JSON.parse(data);
let resData;
if (typeof uploadRes.data === 'string') {
resData = JSON.parse(uploadRes.data);
} else {
resData = uploadRes.data;
}
// 判断上传是否成功
if (uploadRes.statusCode === 200 && resData.code === 200) {
// 上传成功,处理返回结果
uploadedResumeName.value = fileName;
uploadedResumeUrl.value = resData.data || resData.msg || resData.url || '';
$api.msg('简历上传成功');
console.log('上传成功', resData);
// 可以在这里保存简历信息到后端(如果需要)
// saveResumeInfo(userId, uploadedResumeUrl.value, fileName);
} else {
// 上传失败
const errorMsg = resData.msg || resData.message || '上传失败,请重试';
$api.msg(errorMsg);
console.error('上传失败:', resData);
}
} catch (error) {
// 解析响应数据失败
console.error('解析上传响应失败:', error);
console.error('原始响应数据:', uploadRes.data);
$api.msg('上传失败,请重试');
}
},
fail: (err) => {
// 上传失败
console.error('上传文件失败:', err);
$api.msg('上传失败,请检查网络连接');
},
// 上传进度监听(可选)
progress: (res) => {
const progress = res.progress; // 上传进度0-100
console.log('上传进度:', progress + '%');
// 可以在这里更新进度条 UI如果需要
},
complete: () => {
// 上传完成(无论成功或失败)
isUploading.value = false;
}
});
};
// 删除已上传的简历 // 删除已上传的简历
const handleDeleteResume = () => {}; const handleDeleteResume = () => {
if (!uploadedResumeName.value) {
return;
}
uni.showModal({
title: '确认删除',
content: '确定要删除已上传的简历吗?',
success: (res) => {
if (res.confirm) {
// 清除本地数据
uploadedResumeName.value = '';
uploadedResumeUrl.value = '';
$api.msg('已删除');
// 如果需要,可以调用后端接口删除服务器上的文件
// deleteResumeFile(userId);
}
}
});
};
</script> </script>
<style lang="stylus">
/* 修复页面滚动问题:覆盖全局的 overflow: hidden */
page {
overflow-y: auto !important;
overflow-x: hidden;
}
</style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
image{ image{
width: 100%; width: 100%;