commits
This commit is contained in:
+101
-101
@@ -1,101 +1,101 @@
|
||||
# 图片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
|
||||
# 图片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
|
||||
|
||||
Reference in New Issue
Block a user