# AI图片上传和访问故障排除

## 🔴 当前问题

### 问题1：上传失败 - status code 631

**错误提示**：
```
Failed to load resource: the server responded with a status of 631
上传失败: Object
```

**问题原因**：
存储服务返回631错误，可能的原因：

1. **存储配额已满**
   - 项目存储空间已用完
   - 企业存储配额达到上限

2. **项目ID无效**
   - `this.projectId`为空或格式不正确
   - 上传路径：`ai-design-analysis/${this.projectId}`

3. **存储权限不足**
   - 当前用户没有上传权限
   - 项目没有配置存储bucket

4. **文件名编码问题**
   - 文件名包含特殊字符
   - 中文文件名未正确编码

5. **网络问题**
   - 存储服务不可达
   - 超时或连接中断

### 问题2：AI无法访问图片

**错误提示**：
```
❌ AI无法访问图片！
🔍 AI返回的完整内容: （由于未获取实际图片内容，无法进行基于视觉信息的设计分析...）
```

**问题原因**：
1. **图片URL无效**
   - 上传失败导致没有有效的图片URL
   - URL格式错误（blob:// 或本地路径）

2. **图片URL无法访问**
   - 需要鉴权才能访问
   - 跨域问题
   - 图片已被删除

3. **AI配置问题**
   - 缺少vision参数（已修复）
   - 图片URL编码问题（已修复）

## ✅ 故障排除步骤

### 步骤1：检查上传日志

打开浏览器控制台（F12），查找以下日志：

```
📤 准备上传文件: xxx.jpg, 大小: X.XXMBデフォルト上传路径: ai-design-analysis/项目ID
上传进度: XX%
✅ 文件上传成功: https://...
```

**如果没有"文件上传成功"日志**：
- 上传在某个步骤失败了
- 检查详细错误信息

**如果出现631错误**：
```
❌ 上传失败，详细错误: ...
❌ 错误代码: 631
```

### 步骤2：验证项目ID

在控制台执行：
```javascript
// 检查当前项目ID
console.log('当前项目ID:', this.projectId);
```

**项目ID应该**：
- 不为空
- 是一个有效的Parse ObjectId（10个字符的字母数字组合）
- 示例：`iKvYck89zE`

**如果项目ID无效**：
- 项目可能未正确初始化
- 刷新页面重新加载项目

### 步骤3：检查存储配额

联系系统管理员检查：

1. **企业存储配额**
   - 登录华为云OBS控制台
   - 查看bucket使用情况
   - 确认是否达到配额上限

2. **项目存储限制**
   - 检查项目数据库记录
   - 查看是否设置了单项目存储限制

### 步骤4：测试文件上传

尝试上传不同类型的文件：

1. **小文件测试**
   - 上传一个100KB的JPG图片
   - 如果成功，说明不是权限问题

2. **文件名测试**
   - 使用纯英文文件名（如`test.jpg`）
   - 避免中文和特殊字符

3. **格式测试**
   - 只上传JPG/PNG格式
   - 避免HEIC、WebP等特殊格式

### 步骤5：验证图片URL

上传成功后，在控制台检查：

```
✅ 验证通过，有效图片数量: X
📸 有效图片URL列表: ["https://..."]
```

**有效URL必须**：
- 以`http://`或`https://`开头
- 完整的域名和路径
- 可以在浏览器中直接打开

**如果URL无效**：
```
⚠️ 无效的图片URL: blob:http://...
```
- 这是本地预览URL，不是上传后的URL
- 图片上传失败

### 步骤6：测试图片访问

复制图片URL，在浏览器新标签页打开：

**应该能看到图片**：
- 如果看不到，说明URL无法公开访问
- 可能需要配置存储bucket为公开读

**如果需要登录**：
- 存储bucket权限设置错误
- 需要配置为公开读或生成临时访问令牌

## 🔧 临时解决方案

### 方案1：使用其他上传路径

如果`ai-design-analysis/${projectId}`路径有问题，尝试其他路径：

```typescript
const uploadedFile = await storage.upload(file, {
  prefixKey: `temp/ai-analysis`, // 使用临时路径
  onProgress: (progress) => {...}
});
```

### 方案2：使用base64编码（仅限小图片<5MB）

```typescript
// 将图片转为base64
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
  const base64 = reader.result as string;
  // 直接传递base64给AI
  this.aiDesignUploadedImages.push(base64);
};
```

**注意**：base64会增大数据量，不推荐用于大图片。

### 方案3：联系管理员

如果以上方法都无效，请联系系统管理员：

**需要提供的信息**：
1. 完整的错误日志（控制台截图）
2. 项目ID
3. 上传的文件名和大小
4. 错误代码（631）

**管理员需要检查**：
1. 华为云OBS配置
2. 存储bucket权限设置
3. 项目存储配额
4. fmode-ng存储服务配置

## 📋 检查清单

上传图片前，请确认：

- [ ] 项目ID有效（不为空，格式正确）
- [ ] 图片格式为JPG/PNG
- [ ] 图片大小<50MB
- [ ] 文件名不包含特殊字符
- [ ] 网络连接正常
- [ ] 存储配额未满
- [ ] 有上传权限

AI分析前，请确认：

- [ ] 图片上传成功（控制台显示"文件上传成功"）
- [ ] 图片URL有效（以http://或https://开头）
- [ ] 图片URL可访问（浏览器能打开）
- [ ] 至少有1张有效图片
- [ ] vision参数已启用（代码已修复）

## 🎯 预期效果

### 正常流程

```
1. 选择图片文件
   ↓
2. 开始上传
   📤 准备上传文件: xxx.jpg, 大小: 2.5MB
   📂 上传路径: ai-design-analysis/iKvYck89zE
   ↓
3. 上传进度
   上传进度: 10%
   上传进度: 50%
   上传进度: 100%
   ↓
4. 上传成功
   ✅ 文件上传成功: https://file-cloud.fmode.cn/.../xxx.jpg
   ↓
5. 验证URL
   ✅ 验证通过，有效图片数量: 1
   📸 有效图片URL列表: ["https://..."]
   ↓
6. 开始AI分析
   🤖 调用豆包1.6模型...
   📸 原始图片URL: [...]
   📸 编码后URL: [...]
   ↓
7. AI分析完成
   ✅ AI分析完成，原始内容长度: 1523
   📝 AI返回内容预览: 一、空间定位与场景属性...
```

### 异常情况处理

**上传失败（631）**：
```
❌ 上传失败，详细错误: ...
❌ 错误代码: 631
🚨 存储服务错误(631)。可能原因：
1. 存储配额已满
2. 项目ID无效
3. 存储权限不足
```

**URL无效**：
```
⚠️ 无效的图片URL: blob:http://...
⚠️ 发现1个无效图片URL，已自动过滤
🚨 图片上传失败，请重新上传
```

**AI无法访问**：
```
❌ AI无法访问图片！
🔍 AI返回的完整内容: （由于未获取实际图片内容...）
🚨 AI无法访问图片。可能原因：
1. 图片URL格式不正确
2. 图片URL无法被AI访问
3. 图片文件损坏或格式不支持
```

## 💡 常见问题

### Q1: 为什么上传后还是提示"请先上传参考图片"？

**A**: 上传失败或返回的URL无效，导致`aiDesignUploadedImages`数组为空或包含无效URL。检查控制台是否有"文件上传成功"日志。

### Q2: 631错误一定是存储配额问题吗？

**A**: 不一定。631可能是多种原因：
- 存储配额满（最常见）
- 项目ID无效
- 权限不足
- 存储服务配置错误

检查详细错误日志以确定具体原因。

### Q3: 图片能在浏览器打开，但AI还是无法访问？

**A**: 可能的原因：
1. 缺少vision参数（已修复）
2. 图片URL包含中文未编码（已修复）
3. AI服务暂时不可用
4. 图片格式不支持（使用JPG/PNG）

### Q4: 如何清空已上传的图片重新开始？

**A**: 点击"重新分析"按钮，或刷新页面。这会清空`aiDesignUploadedImages`和`aiDesignUploadedFiles`数组。

## 🔗 相关文档

- [AI图片访问问题修复](./ai-image-access-fix.md)
- [AI分析结果显示问题修复](./ai-analysis-display-fix.md)
- [AI分析使用指南](./ai-analysis-usage-guide.md)

---

**更新日期**: 2025-11-27  
**优先级**: 🔴 高（阻塞功能）