# 编辑器图片上传问题修复

## 问题描述
编辑器里上传的图片无法显示。

## 根本原因
文件保存路径和静态文件URL映射不匹配。

## 已完成的修改

### 1. 后端文件保存路径 (`server/controllers/file.go`)

**修改前：**
```go
uploadDir := path.Join("uploads", datePath)
```
文件保存到：`server/uploads/`

**修改后：**
```go
uploadDir := path.Join("..", "uploads", datePath)
```
文件保存到：`项目根目录/uploads/`

### 2. 静态文件映射 (`server/conf/app.conf`)

**修改前：**
```conf
StaticDir = /uploads:uploads
```

**修改后：**
```conf
StaticDir = /uploads:../uploads
```

现在 `/uploads` URL 正确映射到项目根目录的 `uploads` 文件夹。

### 3. 前端URL拼接 (`front/src/components/WangEditor.vue`)

添加了更健壮的URL拼接逻辑：

```typescript
const fileUrl = response.data.data.file_url; // /uploads/2024/01/15/xxx.jpg
const baseUrl = getUploadUrl() ;

let fullUrl = fileUrl;
if (!fileUrl.startsWith('http')) {
  const base = baseUrl.replace(/\/$/, '');
  const url = fileUrl.startsWith('/') ? fileUrl : '/' + fileUrl;
  fullUrl = `${base}${url}`;
}
```

这样可以确保URL正确拼接为：`http://localhost:8080/uploads/2024/01/15/xxx.jpg`

## 目录结构

上传后文件将保存在：

```
yunzer_go/
├── server/
├── front/
└── uploads/                    ← 文件保存位置
    ├── 2024/
    │   └── 01/
    │       └── 15/
    │           └── 20240115143045_example.jpg
```

## 访问URL

上传后可以通过以下URL访问：

```
http://localhost:8080/uploads/2024/01/15/20240115143045_example.jpg
```

## 如何验证

### 1. 上传一个图片
在编辑器中使用图片上传功能上传一张图片。

### 2. 查看控制台日志
打开浏览器开发者工具（F12），查看 Console 标签，应该看到：
```
图片上传成功，URL: http://localhost:8080/uploads/2024/01/15/xxx.jpg
```

### 3. 检查文件是否保存
查看项目根目录的 `uploads` 文件夹：
```bash
ls uploads/2024/01/15/
```

### 4. 测试URL访问
在浏览器中直接访问图片URL，应该能看到图片。

### 5. 检查数据库
查看 `yz_files` 表中的记录：
```sql
SELECT file_path, file_url FROM yz_files ORDER BY upload_time DESC LIMIT 1;
```

应该看到：
- `file_path`: `uploads/2024/01/15/xxx.jpg`
- `file_url`: `/uploads/2024/01/15/xxx.jpg`

## 重启服务器

修改配置后需要重启服务器才能生效：

```bash
cd server
go run main.go
```

或者如果使用编译后的可执行文件：

```bash
./server.exe
```

## 如果还是看不到图片

### 检查清单

1. ✅ 服务器是否重启
2. ✅ 文件是否保存到 `uploads` 目录
3. ✅ 浏览器控制台是否有错误
4. ✅ URL是否正确拼接
5. ✅ 静态文件映射是否正确

### 常见问题

**Q: 上传后文件保存在哪里？**
A: 项目根目录的 `uploads` 文件夹

**Q: 图片URL是什么格式？**
A: `http://localhost:8080/uploads/2024/01/15/filename.jpg`

**Q: 为什么看不到图片？**
A: 检查：
- 文件是否正确保存
- URL是否可访问
- 浏览器控制台错误信息
- 服务器是否重启

**Q: 如何自定义上传目录？**
A: 修改 `server/controllers/file.go` 和 `server/conf/app.conf` 中的路径配置

## 调试建议

如果图片仍不显示，检查以下内容：

1. **查看浏览器网络请求**
   - F12 → Network 标签
   - 查看图片请求是否返回 200
   - 如果返回 404，说明路径不对

2. **查看浏览器控制台**
   - 查看是否有 CORS 错误
   - 查看上传成功后的 URL 是什么

3. **查看服务器日志**
   - 确认文件是否正确上传
   - 确认路径是否正确

4. **检查文件权限**
   - 确保应用有创建目录和写入文件的权限