✨ 优化上传体验:上传前检查文件大小限制
问题:原来文件上传完成后才提示超过大小限制,浪费用户时间 修复: - 后端:添加 /api/config 公开接口返回上传大小限制 - 前端:页面加载时获取配置 - 前端:uploadFile 函数开始时检查文件大小,超限立即提示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user