yunzer_go/EDITOR_UPLOAD_FIX.md

编辑器图片上传问题修复

问题描述

编辑器里上传的图片无法显示。

根本原因

文件保存路径和静态文件URL映射不匹配。

已完成的修改

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

修改前：

uploadDir := path.Join("uploads", datePath)

文件保存到：server/uploads/

修改后：

uploadDir := path.Join("..", "uploads", datePath)

文件保存到：项目根目录/uploads/

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

修改前：

StaticDir = /uploads:uploads

修改后：

StaticDir = /uploads:../uploads

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

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

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

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 文件夹：

ls uploads/2024/01/15/

4. 测试URL访问

在浏览器中直接访问图片URL，应该能看到图片。

5. 检查数据库

查看 yz_files 表中的记录：

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

重启服务器

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

cd server
go run main.go

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

./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. 检查文件权限

   • 确保应用有创建目录和写入文件的权限