优化上传体验:上传前检查文件大小限制

问题:原来文件上传完成后才提示超过大小限制,浪费用户时间

修复:
- 后端:添加 /api/config 公开接口返回上传大小限制
- 前端:页面加载时获取配置
- 前端:uploadFile 函数开始时检查文件大小,超限立即提示

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-25 10:46:10 +08:00
parent 93050a23d9
commit 3045c354f4
2 changed files with 41 additions and 0 deletions

View File

@@ -152,6 +152,9 @@ createApp({
toasts: [],
toastIdCounter: 0,
// 上传限制字节默认10GB
maxUploadSize: 10737418240,
// 提示信息
errorMessage: '',
successMessage: '',
@@ -798,6 +801,19 @@ handleDragLeave(e) {
this.stopProfileSync();
},
// 获取公开的系统配置(上传限制等)
async loadPublicConfig() {
try {
const response = await axios.get(`${this.apiBase}/api/config`);
if (response.data.success) {
this.maxUploadSize = response.data.config.max_upload_size || 10737418240;
}
} catch (error) {
console.error('获取系统配置失败:', error);
// 使用默认值
}
},
// 检查本地存储的登录状态
async checkLoginStatus() {
const token = localStorage.getItem('token');
@@ -1370,6 +1386,18 @@ handleDragLeave(e) {
},
async uploadFile(file) {
// 文件大小限制预检查(在上传前检查,避免用户等待上传完才发现超限)
if (file.size > this.maxUploadSize) {
const fileSizeMB = Math.round(file.size / (1024 * 1024));
const maxSizeMB = Math.round(this.maxUploadSize / (1024 * 1024));
this.showToast(
'error',
'文件超过上传限制',
`文件大小 ${fileSizeMB}MB 超过系统限制 ${maxSizeMB}MB请选择更小的文件`
);
return;
}
// 本地存储配额预检查
if (this.storageType === 'local') {
const estimatedUsage = this.localUsed + file.size;
@@ -2313,6 +2341,8 @@ handleDragLeave(e) {
// 检查URL参数
this.checkUrlParams();
// 获取系统配置(上传限制等)
this.loadPublicConfig();
// 检查登录状态
this.checkLoginStatus();
},