261 lines
6.9 KiB
Markdown
261 lines
6.9 KiB
Markdown
# ImageUpload组件新文件显示修复说明
|
|
|
|
**更新时间**: 2025-01-27
|
|
**版本**: v1.1.0
|
|
**修复类型**: Bug修复
|
|
|
|
## 修复概述
|
|
|
|
本次修复解决了ImageUpload组件中新上传文件图片不显示的问题，**特别是修复了通过OSS ID获取图片的关键机制**，确保新上传的文件能够与历史文件一样正常显示。
|
|
|
|
## 问题现象
|
|
|
|
### 修复前
|
|
- 新上传的文件显示为空白或占位符
|
|
- 新上传的文件没有经过认证处理
|
|
- 新上传的文件缺少必要的属性
|
|
- **🔴 关键问题**: 新上传文件直接使用URL，而不是通过OSS ID获取
|
|
|
|
### 修复后
|
|
- ✅ 新上传的文件能正常显示
|
|
- ✅ 新上传的文件经过认证的blob URL转换
|
|
- ✅ 新上传的文件具有完整的属性
|
|
- ✅ 支持占位符显示和加载状态
|
|
- ✅ **🔴 新上传文件通过OSS ID获取图片**
|
|
|
|
## 技术改进
|
|
|
|
### 1. 🔴 OSS ID获取机制（关键修复）
|
|
```javascript
|
|
// 新上传文件异步加载处理 - 优先使用OSS ID
|
|
const loadPromises = newUploadedFiles.map((item, index) => {
|
|
return (async () => {
|
|
try {
|
|
let blobUrl = '';
|
|
|
|
if (item.ossId) {
|
|
// 🔴 关键修复：通过OSS ID获取预览URL
|
|
blobUrl = await getPreviewUrlByOssId(item.ossId);
|
|
} else if (item.url) {
|
|
// 降级处理：直接URL
|
|
blobUrl = await getPreviewImageBlobUrl(item.url);
|
|
}
|
|
|
|
// 更新文件列表
|
|
updateFileList(item, blobUrl);
|
|
} catch (error) {
|
|
// 降级处理：重新通过OSS ID获取
|
|
fallbackToOssId(item);
|
|
}
|
|
})();
|
|
});
|
|
```
|
|
|
|
### 2. 占位符显示机制
|
|
```javascript
|
|
// 占位符项目创建
|
|
const placeholderItems = newUploadedFiles.map((item, index) => ({
|
|
name: item.name,
|
|
url: 'data:image/svg+xml;base64,...', // 加载中占位图片
|
|
originalUrl: item.url,
|
|
ossId: item.ossId,
|
|
isLoaded: false,
|
|
isPlaceholder: true
|
|
}));
|
|
```
|
|
|
|
### 3. 错误处理和降级机制
|
|
- 网络异常时自动降级到原始URL
|
|
- 完整的错误日志记录
|
|
- 用户友好的错误提示
|
|
- **🔴 多级降级策略**: OSS ID → URL → 重新OSS ID → 原始URL
|
|
|
|
## 🔴 OSS ID获取流程
|
|
|
|
### 1. 上传成功响应
|
|
```javascript
|
|
// 服务器返回的数据结构
|
|
{
|
|
code: 200,
|
|
data: {
|
|
url: "http://example.com/file.jpg", // 文件URL
|
|
fileName: "test.jpg", // 文件名
|
|
ossId: "1951584287279034370" // 🔴 关键：OSS ID
|
|
}
|
|
}
|
|
```
|
|
|
|
### 2. 前端处理流程
|
|
```javascript
|
|
// 1. 接收上传响应
|
|
const uploadItem = {
|
|
name: res.data.fileName,
|
|
url: res.data.url,
|
|
ossId: res.data.ossId // 🔴 保存OSS ID
|
|
};
|
|
|
|
// 2. 通过OSS ID获取文件信息
|
|
const ossList = await listByIds(ossId);
|
|
|
|
// 3. 获取认证的blob URL
|
|
const blobUrl = await getPreviewImageBlobUrl(ossList[0].url);
|
|
|
|
// 4. 更新文件列表显示
|
|
fileList[index].url = blobUrl;
|
|
```
|
|
|
|
### 3. 降级处理策略
|
|
1. **第一优先级**: 通过OSS ID获取图片
|
|
2. **第二优先级**: 直接使用URL获取图片
|
|
3. **第三优先级**: 重新尝试OSS ID获取
|
|
4. **最终降级**: 使用原始URL
|
|
|
|
## 使用方法
|
|
|
|
### 基本用法
|
|
```vue
|
|
<template>
|
|
<ImageUpload v-model="form.images" :limit="5" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import ImageUpload from '@/components/ImageUpload/index.vue';
|
|
|
|
const form = ref({
|
|
images: ''
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### 高级配置
|
|
```vue
|
|
<template>
|
|
<ImageUpload
|
|
v-model="form.images"
|
|
:limit="10"
|
|
:file-size="5"
|
|
:file-type="['png', 'jpg', 'jpeg']"
|
|
:compress-support="true"
|
|
:compress-target-size="300"
|
|
/>
|
|
</template>
|
|
```
|
|
|
|
## 测试验证
|
|
|
|
### 测试页面
|
|
使用测试页面验证功能：`web/src/views/demo/ImageUploadTest.vue`
|
|
|
|
### 测试步骤
|
|
1. 打开测试页面
|
|
2. 上传新图片文件
|
|
3. 验证图片是否正常显示
|
|
4. 测试图片预览功能
|
|
5. 测试删除功能
|
|
6. **🔴 验证OSS ID获取机制**
|
|
|
|
### 验证要点
|
|
- ✅ 新上传图片正常显示
|
|
- ✅ 历史图片正常显示
|
|
- ✅ 混合文件场景正常
|
|
- ✅ 图片预览功能正常
|
|
- ✅ 删除功能正常
|
|
- ✅ 错误处理有效
|
|
- ✅ **🔴 新上传文件通过OSS ID获取图片**
|
|
|
|
## 调试信息
|
|
|
|
### 控制台日志
|
|
组件会在控制台输出详细的调试信息：
|
|
```
|
|
handleUploadSuccess:res {code: 200, data: {...}}
|
|
handleUploadSuccess:file File {...}
|
|
添加上传项到uploadList: {name: "test.jpg", url: "...", ossId: "123"}
|
|
uploadedSuccessfully called, number: 1, uploadList length: 1
|
|
开始处理新上传的文件: [...]
|
|
通过OSS ID获取预览URL for 123
|
|
获取到的blob URL for 123: blob:http://...
|
|
成功更新文件 123
|
|
```
|
|
|
|
### 🔴 OSS ID相关日志
|
|
```
|
|
通过OSS ID获取预览URL for 1951584287279034370
|
|
loadFileImageAsync: 通过OSS ID获取预览URL for 1951584287279034370
|
|
降级处理：重新通过OSS ID获取 1951584287279034370
|
|
```
|
|
|
|
### 调试方法
|
|
1. 打开浏览器开发者工具
|
|
2. 查看Console面板的日志输出
|
|
3. 根据日志信息排查问题
|
|
4. **🔴 特别关注OSS ID相关的日志**
|
|
|
|
## 常见问题
|
|
|
|
### Q1: 新上传的图片仍然不显示？
|
|
**A**: 检查控制台是否有错误信息，确认网络连接正常，OSS服务可用。**特别检查OSS ID获取相关的日志**。
|
|
|
|
### Q2: 图片加载很慢？
|
|
**A**: 这是正常的，因为需要经过OSS ID获取和认证的blob URL转换。可以通过网络优化或CDN加速改善。
|
|
|
|
### Q3: 某些图片无法预览？
|
|
**A**: 可能是权限问题或文件损坏，检查OSS文件是否正常，权限是否正确。**确认是否通过OSS ID正确获取**。
|
|
|
|
### Q4: 如何禁用异步加载？
|
|
**A**: 目前不支持禁用，异步加载和OSS ID获取是必需的认证机制。如需优化，可以考虑缓存策略。
|
|
|
|
### Q5: 🔴 为什么必须通过OSS ID获取？
|
|
**A**: OSS ID获取机制确保：
|
|
- 文件访问权限验证
|
|
- 统一的认证处理
|
|
- 与历史文件处理一致性
|
|
- 更好的安全性和稳定性
|
|
|
|
## 性能优化
|
|
|
|
### 1. 缓存机制
|
|
- blob URL缓存避免重复请求
|
|
- 预览URL缓存提升响应速度
|
|
- **🔴 OSS ID信息缓存**
|
|
|
|
### 2. 并行处理
|
|
- 多文件并行加载
|
|
- 异步处理不阻塞UI
|
|
- **🔴 OSS ID批量获取**
|
|
|
|
### 3. 内存管理
|
|
- 自动清理blob URL
|
|
- 组件卸载时释放资源
|
|
- **🔴 OSS ID缓存清理**
|
|
|
|
## 更新日志
|
|
|
|
### v1.1.0 (2025-01-27)
|
|
- 🐛 修复新上传文件图片不显示问题
|
|
- ✨ 添加异步加载机制
|
|
- ✨ 添加占位符显示
|
|
- ✨ 完善错误处理
|
|
- 📝 添加详细调试日志
|
|
- 🎨 优化样式和动画
|
|
- **🔴 关键修复**: 新上传文件通过OSS ID获取图片
|
|
|
|
### v1.0.0 (之前版本)
|
|
- 基础图片上传功能
|
|
- 历史文件显示
|
|
- 图片预览功能
|
|
|
|
## 技术支持
|
|
|
|
如遇到问题，请：
|
|
1. 查看控制台错误信息
|
|
2. 检查网络连接状态
|
|
3. 验证OSS服务配置
|
|
4. 参考测试页面示例
|
|
5. **🔴 特别检查OSS ID获取相关日志**
|
|
6. 联系技术支持团队
|
|
|
|
---
|
|
|
|
**注意**: 本次修复向后兼容，不会影响现有功能的使用。**关键改进是确保新上传文件通过OSS ID获取图片，与历史文件处理机制保持一致**。 |