platform-vue/docs/图片URL处理说明.md

图片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

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. 在组件中使用

<script setup>
import { getFileUrl } from '@/utils/url';

// 使用工具函数
const imageUrl = getFileUrl(file.url);
</script>

使用示例

本地存储

const url = '/uploads/2026/04/09/xxx.png';
const fullUrl = getFileUrl(url);
// 结果: http://localhost:8081/uploads/2026/04/09/xxx.png

七牛云存储

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. 兼容两种存储：确保本地存储和七牛云存储都能正常工作

测试清单

• 本地存储图片显示正常
• 七牛云存储图片显示正常
• 图片预览功能正常
• 视频文件显示正常
• 文档下载功能正常

相关文档

• 存储配置功能
• 七牛云配置指南

---

修复时间: 2024-01-01 修复人员: AI Assistant