提交代码
This commit is contained in:
zlwu committed
1 parent
3a27cfa0e7
commit
3f5caaea67
2 files changed
+398
-7
No files matched your search
@@ -136,6 +136,7 @@
|
||||
:src="image.blobUrl || image.url"
|
||||
class="attachment-image"
|
||||
mode="aspectFill"
|
||||
@error="handleImageError"
|
||||
></image>
|
||||
|
||||
<!-- 上传状态遮罩 -->
|
||||
@@ -809,13 +810,53 @@ export default {
|
||||
});
|
||||
|
||||
if (response && response.code === 200 && response.data) {
|
||||
this.attachmentList = response.data.map((item, index) => ({
|
||||
uid: `existing_${index}_${Date.now()}`,
|
||||
name: item.originalName || `证明材料${index + 1}`,
|
||||
url: item.url,
|
||||
ossId: item.ossId,
|
||||
status: 'success',
|
||||
}));
|
||||
const attachmentFiles = response.data.map((item, index) => {
|
||||
// 使用fileSuffix字段判断文件类型
|
||||
const fileType = this.getFileTypeBySuffix(item.fileSuffix);
|
||||
const isImage = this.isImageFile({
|
||||
name: item.originalName,
|
||||
type: fileType,
|
||||
});
|
||||
|
||||
// 处理图片URL - 确保有正确的API前缀
|
||||
let processedUrl = item.url;
|
||||
if (isImage && item.url && item.url.startsWith('/resource/')) {
|
||||
// 图片文件需要添加/api前缀
|
||||
processedUrl = `/api${item.url}`;
|
||||
}
|
||||
|
||||
// 构造完整的文件名（包含扩展名）
|
||||
let fullFileName = item.originalName || `证明材料${index + 1}`;
|
||||
if (
|
||||
item.fileSuffix &&
|
||||
!fullFileName
|
||||
.toLowerCase()
|
||||
.endsWith(`.${item.fileSuffix.toLowerCase()}`)
|
||||
) {
|
||||
fullFileName = `${fullFileName}.${item.fileSuffix}`;
|
||||
}
|
||||
|
||||
return {
|
||||
uid: `existing_${index}_${Date.now()}`,
|
||||
name: fullFileName,
|
||||
url: processedUrl,
|
||||
ossId: item.ossId,
|
||||
status: 'success',
|
||||
type: fileType,
|
||||
size: item.fileSize || 0,
|
||||
};
|
||||
});
|
||||
|
||||
this.attachmentList = attachmentFiles;
|
||||
|
||||
// 🚀 关键步骤：处理图片文件以确保正确显示
|
||||
await this.processAllImageFiles();
|
||||
|
||||
// 强制刷新组件显示
|
||||
this.$nextTick(() => {
|
||||
// 预加载图片以确保能正确显示
|
||||
this.preloadAllImages();
|
||||
});
|
||||
} else {
|
||||
this.attachmentList = [];
|
||||
}
|
||||
@@ -1970,6 +2011,101 @@ export default {
|
||||
return `file/${ext}`;
|
||||
},
|
||||
|
||||
// 处理所有图片文件，获取blob数据以确保正确显示
|
||||
async processAllImageFiles() {
|
||||
console.log('=== 处理所有图片文件 ===');
|
||||
|
||||
// 处理附件列表中的图片
|
||||
const imageFiles = this.attachmentList.filter((file) => this.isImageFile(file));
|
||||
for (const file of imageFiles) {
|
||||
if (file.url && !file.blobUrl) {
|
||||
try {
|
||||
console.log(`处理图片文件: ${file.name}`);
|
||||
const blobUrl = await this.getImageBlobUrl(file.url);
|
||||
if (blobUrl) {
|
||||
file.blobUrl = blobUrl;
|
||||
file.fileType = 'image';
|
||||
file.type =
|
||||
file.type && file.type.startsWith('image') ? file.type : 'image';
|
||||
file.isImage = true;
|
||||
console.log(`图片文件处理成功: ${file.name} - ${blobUrl}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`处理图片文件失败: ${file.name}`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 预加载所有图片以确保能正确显示
|
||||
async preloadAllImages() {
|
||||
console.log('=== 预加载所有图片 ===');
|
||||
|
||||
// 预加载附件列表中的图片
|
||||
const imageFiles = this.attachmentList.filter((file) => this.isImageFile(file));
|
||||
for (const file of imageFiles) {
|
||||
if (file.url) {
|
||||
try {
|
||||
console.log(`预加载图片: ${file.name} - ${file.url}`);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
console.log(`图片预加载成功: ${file.name}`);
|
||||
};
|
||||
img.onerror = () => {
|
||||
console.error(`图片预加载失败: ${file.name} - ${file.url}`);
|
||||
};
|
||||
img.src = file.blobUrl || file.url;
|
||||
} catch (error) {
|
||||
console.error(`预加载图片出错: ${file.name}`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取图片的blob数据
|
||||
async getImageBlobUrl(imageUrl) {
|
||||
try {
|
||||
console.log(`获取图片blob数据: ${imageUrl}`);
|
||||
|
||||
// 处理图片URL路径
|
||||
let apiUrl = imageUrl;
|
||||
if (imageUrl.startsWith('/api/')) {
|
||||
// 移除/api前缀，因为request会自动添加baseURL
|
||||
apiUrl = imageUrl.replace('/api', '');
|
||||
} else if (imageUrl.startsWith('/resource/')) {
|
||||
// 直接使用相对路径
|
||||
apiUrl = imageUrl;
|
||||
} else if (imageUrl.startsWith('http')) {
|
||||
// 完整URL，需要特殊处理
|
||||
console.log('检测到完整URL，直接返回原URL');
|
||||
return imageUrl;
|
||||
}
|
||||
|
||||
console.log(`API请求URL: ${apiUrl}`);
|
||||
|
||||
// 使用request方法获取图片数据
|
||||
const response = await request({
|
||||
url: apiUrl,
|
||||
method: 'GET',
|
||||
responseType: 'arraybuffer', // 设置响应类型为arraybuffer
|
||||
header: {
|
||||
isToken: true, // 图片请求可能需要token验证
|
||||
},
|
||||
});
|
||||
|
||||
// 将arraybuffer转换为blob
|
||||
const blob = new Blob([response], { type: 'image/*' });
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
|
||||
console.log(`成功创建blob URL: ${blobUrl}`);
|
||||
return blobUrl;
|
||||
} catch (error) {
|
||||
console.error(`获取图片blob数据失败: ${imageUrl}`, error);
|
||||
// 如果请求失败，返回原始URL作为备用方案
|
||||
return imageUrl;
|
||||
}
|
||||
},
|
||||
|
||||
// 清理blob URL，防止内存泄漏
|
||||
cleanupBlobUrls() {
|
||||
console.log('=== 清理blob URL ===');
|
||||
@@ -1984,6 +2120,11 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 图片加载错误处理
|
||||
handleImageError(event) {
|
||||
console.warn('图片加载失败:', event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in new issue
Block a user