peixue-dev/peidu/Archive/一次性文件/[一次性]上传问题诊断-2026-01-25.md

上传问题诊断指南

问题现象

上传新轮播图时，返回的URL仍然是旧格式：

❌ http://localhost:8080/uploads/images/2026/01/08/xxx.png

期望格式：

✅ https://px.ddn-ai.cloud/uploads/20260125_xxx.jpg

诊断步骤

步骤1: 确认后端已重启 ⭐⭐⭐

最重要！ 修改 application.yml 后必须重启后端。

# 1. 停止当前后端进程
# 2. 重新启动后端
# 3. 确认端口 8089 已监听
netstat -ano | findstr :8089

检查点：

• 后端已停止旧进程
• 后端已重新启动
• 端口 8089 正在监听
• 启动日志中没有错误

步骤2: 确认管理后台已重新编译 ⭐⭐

修改 banner.vue 后必须重新编译。

cd peidu/admin
npm run build

检查点：

• 编译成功，没有错误
• dist 目录已更新
• 浏览器已刷新（Ctrl+F5 强制刷新）

步骤3: 检查上传请求 ⭐

打开浏览器开发者工具（F12）：

1. 切换到 Network 面板
2. 点击上传图片
3. 找到 /api/file/upload 请求
4. 查看 Response

期望的正确响应：

{
  "code": 200,
  "message": "上传成功",
  "data": {
    "fileName": "20260125_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg",
    "fileUrl": "https://px.ddn-ai.cloud/uploads/20260125_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg",
    "fileSize": "123456",
    "fileType": "jpg"
  }
}

如果看到错误响应：

404 错误：

{
  "code": 404,
  "message": "接口不存在"
}

→ 说明后端没有 /api/file/upload 接口，需要检查后端代码

500 错误：

{
  "code": 500,
  "message": "远程上传失败: ..."
}

→ 说明远程上传到服务器失败，需要检查服务器连接

步骤4: 检查配置文件

后端配置 (application.yml)

file:
  upload:
    mode: remote
    remote:
      url: https://px.ddn-ai.cloud/api/file/upload/direct
    url-prefix: https://px.ddn-ai.cloud/uploads/
    url: https://px.ddn-ai.cloud/uploads  # 兼容旧代码

检查点：

• mode: remote (不是 local)
• url-prefix 是 https://px.ddn-ai.cloud/uploads/
• url 是 https://px.ddn-ai.cloud/uploads

前端配置 (banner.vue)

<el-upload
  action="/api/file/upload"
  name="file"
  ...
>

检查点：

• action="/api/file/upload" (不是 /api/upload/image)
• name="file" (参数名必须是 file)

步骤5: 测试服务器接口

测试服务器的直接上传接口是否可用：

# 在浏览器中访问
https://px.ddn-ai.cloud/api/file/config

# 应该返回配置信息
{
  "code": 200,
  "data": {
    "mode": "local",
    "maxSize": "10MB",
    ...
  }
}

检查点：

• 服务器接口可访问
• 返回正确的配置信息

常见问题

问题1: 后端没有重启

症状: 上传后返回旧URL格式

解决:

1. 停止后端进程
2. 重新启动后端
3. 确认配置已加载

问题2: 管理后台没有重新编译

症状: 上传请求还是发到旧接口 /api/upload/image

解决:

cd peidu/admin
npm run build
# 然后强制刷新浏览器 Ctrl+F5

问题3: 浏览器缓存

症状: 修改后没有生效

解决:

1. 按 Ctrl+F5 强制刷新
2. 或清除浏览器缓存
3. 或使用无痕模式测试

问题4: 服务器接口不可用

症状: 返回 500 错误，提示"远程上传失败"

解决:

1. 检查服务器是否运行
2. 检查服务器防火墙
3. 检查服务器 /api/file/upload/direct 接口

问题5: 文件参数名错误

症状: 后端提示"文件不能为空"

解决: 确保前端 <el-upload> 中有 name="file"

快速检查清单

在上传测试前，确认：

• 后端已重启（最重要！）
• 管理后台已重新编译
• 浏览器已强制刷新（Ctrl+F5）
• application.yml 配置正确
• banner.vue 使用新接口
• 服务器接口可访问

调试技巧

查看后端日志

上传时观察后端控制台输出：

=== 上传图片(智能模式) ===
文件名: test.jpg
文件大小: 123456 bytes
上传模式: remote
使用远程上传模式
发送远程上传请求: https://px.ddn-ai.cloud/api/file/upload/direct
远程上传成功: https://px.ddn-ai.cloud/uploads/20260125_xxx.jpg

查看前端请求

Network 面板中查看：

• Request URL: http://localhost:8089/api/file/upload
• Request Method: POST
• Form Data: file: (binary)
• Response: 查看返回的 JSON

下一步

如果按照以上步骤检查后仍有问题，请提供：

1. 后端启动日志
2. 上传时的后端日志
3. 浏览器 Network 面板的截图
4. 上传请求的完整 Response