102 lines
2.6 KiB
Markdown
102 lines
2.6 KiB
Markdown
# 图片URL处理说明
|
||
|
||
## 问题描述
|
||
|
||
在使用七牛云存储时，上传的图片URL会出现重复拼接的问题：
|
||
|
||
```
|
||
错误: http://localhost:8081http://7cloud.yunzer.cn/2026/04/09/xxx.png
|
||
正确: http://7cloud.yunzer.cn/2026/04/09/xxx.png
|
||
```
|
||
|
||
## 原因分析
|
||
|
||
1. **本地存储**返回的URL是相对路径：`/uploads/2026/04/09/xxx.png`
|
||
2. **七牛云存储**返回的URL是完整URL：`http://7cloud.yunzer.cn/2026/04/09/xxx.png`
|
||
3. 前端的 `getFileUrl` 方法会自动拼接 `VITE_API_BASE_URL`
|
||
4. 导致七牛云URL被重复拼接
|
||
|
||
## 解决方案
|
||
|
||
### 1. 创建通用工具函数
|
||
|
||
文件：`platform/src/utils/url.js`
|
||
|
||
```javascript
|
||
export function getFileUrl(url) {
|
||
if (!url) return '';
|
||
|
||
// 如果URL已经是完整的URL，直接返回
|
||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||
return url;
|
||
}
|
||
|
||
// 否则拼接API基础URL
|
||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
|
||
return `${API_BASE_URL}${url}`;
|
||
}
|
||
```
|
||
|
||
### 2. 在组件中使用
|
||
|
||
```vue
|
||
<script setup>
|
||
import { getFileUrl } from '@/utils/url';
|
||
|
||
// 使用工具函数
|
||
const imageUrl = getFileUrl(file.url);
|
||
</script>
|
||
```
|
||
|
||
## 使用示例
|
||
|
||
### 本地存储
|
||
|
||
```javascript
|
||
const url = '/uploads/2026/04/09/xxx.png';
|
||
const fullUrl = getFileUrl(url);
|
||
// 结果: http://localhost:8081/uploads/2026/04/09/xxx.png
|
||
```
|
||
|
||
### 七牛云存储
|
||
|
||
```javascript
|
||
const url = 'http://7cloud.yunzer.cn/2026/04/09/xxx.png';
|
||
const fullUrl = getFileUrl(url);
|
||
// 结果: http://7cloud.yunzer.cn/2026/04/09/xxx.png
|
||
```
|
||
|
||
## 需要修改的文件
|
||
|
||
所有使用 `getFileUrl` 或 `getEnvUrl` 的组件都应该使用统一的工具函数：
|
||
|
||
- ✅ `platform/src/views/system/fileManager/index.vue`
|
||
- ⏳ `platform/src/views/moduleshop/center/index.vue`
|
||
- ⏳ `platform/src/views/apps/babyhealth/babys/index.vue`
|
||
- ⏳ `platform/src/views/apps/babyhealth/babys/components/edit.vue`
|
||
- ⏳ 其他使用图片URL的组件
|
||
|
||
## 最佳实践
|
||
|
||
1. **统一使用工具函数**：不要在组件中重复定义 `getFileUrl`
|
||
2. **判断完整URL**：始终检查URL是否已经是完整URL
|
||
3. **兼容两种存储**：确保本地存储和七牛云存储都能正常工作
|
||
|
||
## 测试清单
|
||
|
||
- [x] 本地存储图片显示正常
|
||
- [x] 七牛云存储图片显示正常
|
||
- [x] 图片预览功能正常
|
||
- [ ] 视频文件显示正常
|
||
- [ ] 文档下载功能正常
|
||
|
||
## 相关文档
|
||
|
||
- [存储配置功能](../go/docs/README_STORAGE.md)
|
||
- [七牛云配置指南](../go/docs/storage-config-guide.md)
|
||
|
||
---
|
||
|
||
**修复时间**: 2024-01-01
|
||
**修复人员**: AI Assistant
|