fix: 文件上传提示优化、element-plus-x版本回退
This commit is contained in:
372
Yi.Ai.Vue3/pnpm-lock.yaml
generated
372
Yi.Ai.Vue3/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -6,8 +6,6 @@ import { ElMessage } from 'element-plus';
|
|||||||
import mammoth from 'mammoth';
|
import mammoth from 'mammoth';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import * as XLSX from 'xlsx';
|
import * as XLSX from 'xlsx';
|
||||||
import Popover from '@/components/Popover/index.vue';
|
|
||||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
|
||||||
import { useFilesStore } from '@/stores/modules/files';
|
import { useFilesStore } from '@/stores/modules/files';
|
||||||
|
|
||||||
// 配置 PDF.js worker - 使用稳定的 CDN
|
// 配置 PDF.js worker - 使用稳定的 CDN
|
||||||
@@ -413,49 +411,73 @@ onChange(async (files) => {
|
|||||||
// 处理图片文件
|
// 处理图片文件
|
||||||
if (isImage) {
|
if (isImage) {
|
||||||
try {
|
try {
|
||||||
// 多级压缩策略:逐步降低质量和分辨率
|
// 控制参数:是否开启图片压缩
|
||||||
const compressionLevels = [
|
const enableImageCompression = true; // 这里可以设置为变量或从配置读取
|
||||||
{ maxWidth: 800, maxHeight: 800, quality: 0.6 },
|
|
||||||
{ maxWidth: 600, maxHeight: 600, quality: 0.5 },
|
|
||||||
{ maxWidth: 400, maxHeight: 400, quality: 0.4 },
|
|
||||||
];
|
|
||||||
|
|
||||||
let compressedBlob: Blob | null = null;
|
let finalBlob: Blob = file;
|
||||||
let base64 = '';
|
let base64 = '';
|
||||||
let compressionLevel = 0;
|
let compressionLevel = 0;
|
||||||
|
|
||||||
// 尝试不同级别的压缩
|
|
||||||
for (const level of compressionLevels) {
|
|
||||||
compressionLevel++;
|
|
||||||
compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
|
|
||||||
base64 = await blobToBase64(compressedBlob);
|
|
||||||
|
|
||||||
// 检查是否满足总长度限制
|
|
||||||
const estimatedLength = Math.floor(base64.length * 0.5);
|
|
||||||
if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
|
|
||||||
// 满足限制,使用当前压缩级别
|
|
||||||
totalContentLength += estimatedLength;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果是最后一级压缩仍然超限,则跳过
|
|
||||||
if (compressionLevel === compressionLevels.length) {
|
|
||||||
const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
|
|
||||||
ElMessage.error(`${file.name} (${fileSizeMB}MB) 即使压缩后仍超过总内容限制,已跳过`);
|
|
||||||
compressedBlob = null;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果压缩失败,跳过此文件
|
|
||||||
if (!compressedBlob) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算压缩比例
|
|
||||||
const originalSize = (file.size / 1024).toFixed(2);
|
const originalSize = (file.size / 1024).toFixed(2);
|
||||||
const compressedSize = (compressedBlob.size / 1024).toFixed(2);
|
let finalSize = originalSize;
|
||||||
console.log(`图片压缩: ${file.name} - 原始: ${originalSize}KB, 压缩后: ${compressedSize}KB (级别${compressionLevel})`);
|
|
||||||
|
if (enableImageCompression) {
|
||||||
|
// 多级压缩策略:逐步降低质量和分辨率
|
||||||
|
const compressionLevels = [
|
||||||
|
{ maxWidth: 800, maxHeight: 800, quality: 0.6 },
|
||||||
|
{ maxWidth: 600, maxHeight: 600, quality: 0.5 },
|
||||||
|
{ maxWidth: 400, maxHeight: 400, quality: 0.4 },
|
||||||
|
];
|
||||||
|
|
||||||
|
let compressedBlob: Blob | null = null;
|
||||||
|
|
||||||
|
// 尝试不同级别的压缩
|
||||||
|
for (const level of compressionLevels) {
|
||||||
|
compressionLevel++;
|
||||||
|
compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
|
||||||
|
base64 = await blobToBase64(compressedBlob);
|
||||||
|
|
||||||
|
// 检查是否满足总长度限制
|
||||||
|
const estimatedLength = Math.floor(base64.length * 0.5);
|
||||||
|
if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
|
||||||
|
// 满足限制,使用当前压缩级别
|
||||||
|
totalContentLength += estimatedLength;
|
||||||
|
finalBlob = compressedBlob;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果是最后一级压缩仍然超限,则跳过
|
||||||
|
if (compressionLevel === compressionLevels.length) {
|
||||||
|
const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
|
||||||
|
ElMessage.error(`${file.name} 图片内容过大,请压缩后上传`);
|
||||||
|
compressedBlob = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果压缩失败,跳过此文件
|
||||||
|
if (!compressedBlob) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算压缩比例
|
||||||
|
finalSize = (finalBlob.size / 1024).toFixed(2);
|
||||||
|
console.log(`图片压缩: ${file.name} - 原始: ${originalSize}KB, 压缩后: ${finalSize}KB (级别${compressionLevel})`);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// 不开启压缩时,直接转换原始文件
|
||||||
|
base64 = await blobToBase64(file);
|
||||||
|
|
||||||
|
// 检查总长度限制
|
||||||
|
const estimatedLength = Math.floor(base64.length * 0.5);
|
||||||
|
if (totalContentLength + estimatedLength > MAX_TOTAL_CONTENT_LENGTH) {
|
||||||
|
const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
|
||||||
|
ElMessage.error(`${file.name} (${fileSizeMB}MB) 超过总长度限制,已跳过`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
totalContentLength += estimatedLength;
|
||||||
|
console.log(`图片未压缩: ${file.name} - 大小: ${originalSize}KB`);
|
||||||
|
}
|
||||||
|
|
||||||
arr.push({
|
arr.push({
|
||||||
uid: crypto.randomUUID(),
|
uid: crypto.randomUUID(),
|
||||||
@@ -473,8 +495,8 @@ onChange(async (files) => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
catch (error) {
|
catch (error) {
|
||||||
console.error('压缩图片失败:', error);
|
console.error('处理图片失败:', error);
|
||||||
ElMessage.error(`${file.name} 压缩失败`);
|
ElMessage.error(`${file.name} 处理失败`);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -493,9 +515,10 @@ onChange(async (files) => {
|
|||||||
// 至少保留1000字符才有意义
|
// 至少保留1000字符才有意义
|
||||||
finalContent = result.content.substring(0, remainingSpace);
|
finalContent = result.content.substring(0, remainingSpace);
|
||||||
wasTruncated = true;
|
wasTruncated = true;
|
||||||
} else if (remainingSpace <= 1000) {
|
}
|
||||||
|
else if (remainingSpace <= 1000) {
|
||||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制,已跳过`);
|
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制,已跳过`);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -542,9 +565,10 @@ onChange(async (files) => {
|
|||||||
if (result.content.length > remainingSpace && remainingSpace > 1000) {
|
if (result.content.length > remainingSpace && remainingSpace > 1000) {
|
||||||
finalContent = result.content.substring(0, remainingSpace);
|
finalContent = result.content.substring(0, remainingSpace);
|
||||||
wasTruncated = true;
|
wasTruncated = true;
|
||||||
} else if (remainingSpace <= 1000) {
|
}
|
||||||
|
else if (remainingSpace <= 1000) {
|
||||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制,已跳过`);
|
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制,已跳过`);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -591,9 +615,10 @@ onChange(async (files) => {
|
|||||||
if (result.content.length > remainingSpace && remainingSpace > 1000) {
|
if (result.content.length > remainingSpace && remainingSpace > 1000) {
|
||||||
finalContent = result.content.substring(0, remainingSpace);
|
finalContent = result.content.substring(0, remainingSpace);
|
||||||
wasTruncated = true;
|
wasTruncated = true;
|
||||||
} else if (remainingSpace <= 1000) {
|
}
|
||||||
|
else if (remainingSpace <= 1000) {
|
||||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制,已跳过`);
|
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制,已跳过`);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -645,9 +670,10 @@ onChange(async (files) => {
|
|||||||
if (finalContent.length > remainingSpace && remainingSpace > 1000) {
|
if (finalContent.length > remainingSpace && remainingSpace > 1000) {
|
||||||
finalContent = finalContent.substring(0, remainingSpace);
|
finalContent = finalContent.substring(0, remainingSpace);
|
||||||
truncated = true;
|
truncated = true;
|
||||||
} else if (remainingSpace <= 1000) {
|
}
|
||||||
|
else if (remainingSpace <= 1000) {
|
||||||
const fileSizeKB = (file.size / 1024).toFixed(2);
|
const fileSizeKB = (file.size / 1024).toFixed(2);
|
||||||
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总内容限制,已跳过`);
|
ElMessage.error(`${file.name} (${fileSizeKB}KB) 会超过总长度限制,已跳过`);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -42,12 +42,8 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-show="layout === 'blankPage'">
|
<div>
|
||||||
<LayoutBlankPage />
|
<component :is="LayoutComponent[layout]" />
|
||||||
<!-- <component :is="LayoutComponent[layout]" /> -->
|
|
||||||
</div>
|
|
||||||
<div v-show="layout !== 'blankPage'">
|
|
||||||
<LayoutVertical />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user