173 lines
3.8 KiB
Markdown
173 lines
3.8 KiB
Markdown
# 编辑器图片上传问题修复
|
||
|
||
## 问题描述
|
||
编辑器里上传的图片无法显示。
|
||
|
||
## 根本原因
|
||
文件保存路径和静态文件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. **检查文件权限**
|
||
- 确保应用有创建目录和写入文件的权限
|
||
|