fix: 修复压缩后文件名显示问题

- 确保压缩后的文件在前端显示正确的 .zip 后缀
- 使用 nextTick 强制更新文件名避免被组件覆盖
This commit is contained in:
Your Name 2026-01-29 19:58:13 +08:00
parent 3b6f5f9659
commit 7392fd2908

View File

@ -1970,16 +1970,18 @@ const handleUpload = async (options: any) => {
if (fileUrls && fileUrls.length > 0) {
const fileUrl = fileUrls[0]
console.log('[文件上传] 准备更新文件列表,URL:', fileUrl)
// 确定最终显示的文件名(压缩后的文件名或原文件名)
const finalFileName = wasCompressed ? fileToUpload.name : file.name
console.log('[文件上传] 准备更新文件列表,URL:', fileUrl, '文件名:', finalFileName)
// 更新文件列表(显示名使用压缩后的文件名)
const fileIndex = fileList.value.findIndex(f => f.uid === file.uid)
if (fileIndex !== -1) {
const updatedFile = {
...fileList.value[fileIndex],
name: wasCompressed ? fileToUpload.name : file.name, // 显示压缩后的文件名
name: finalFileName, // 显示压缩后的文件名
status: 'done',
response: { fileUrl: fileUrl, data: fileUrls },
response: { fileUrl: fileUrl, data: fileUrls, fileName: finalFileName },
url: fileUrl,
percent: 100
} as UploadFile
@ -1990,9 +1992,22 @@ const handleUpload = async (options: any) => {
uploadProgress.value = 0
if (onSuccess) {
// onSuccess 的第一个参数是响应数据,第二个参数是文件对象
onSuccess({ fileUrl: fileUrl, data: fileUrls }, file)
// onSuccess 的第一个参数是响应数据
// 注意:不传原始 file 对象,避免组件用原文件名覆盖
onSuccess({ fileUrl: fileUrl, data: fileUrls, fileName: finalFileName })
}
// 使用 nextTick 确保文件名在组件更新后仍然正确
if (wasCompressed) {
nextTick(() => {
const idx = fileList.value.findIndex(f => f.uid === file.uid)
if (idx !== -1 && fileList.value[idx].name !== finalFileName) {
fileList.value[idx] = { ...fileList.value[idx], name: finalFileName }
console.log('[文件上传] nextTick 强制更新文件名为:', finalFileName)
}
})
}
message.success(wasCompressed ? '文件压缩并上传成功' : '文件上传成功')
} else {
throw new Error('上传失败:未返回文件URL')