237 lines
4.7 KiB
Markdown
237 lines
4.7 KiB
Markdown
# 上传问题诊断指南
|
||
|
||
## 问题现象
|
||
|
||
上传新轮播图时，返回的URL仍然是旧格式：
|
||
```
|
||
❌ http://localhost:8080/uploads/images/2026/01/08/xxx.png
|
||
```
|
||
|
||
期望格式：
|
||
```
|
||
✅ https://px.ddn-ai.cloud/uploads/20260125_xxx.jpg
|
||
```
|
||
|
||
## 诊断步骤
|
||
|
||
### 步骤1: 确认后端已重启 ⭐⭐⭐
|
||
|
||
**最重要！** 修改 `application.yml` 后必须重启后端。
|
||
|
||
```bash
|
||
# 1. 停止当前后端进程
|
||
# 2. 重新启动后端
|
||
# 3. 确认端口 8089 已监听
|
||
netstat -ano | findstr :8089
|
||
```
|
||
|
||
**检查点**：
|
||
- [ ] 后端已停止旧进程
|
||
- [ ] 后端已重新启动
|
||
- [ ] 端口 8089 正在监听
|
||
- [ ] 启动日志中没有错误
|
||
|
||
### 步骤2: 确认管理后台已重新编译 ⭐⭐
|
||
|
||
修改 `banner.vue` 后必须重新编译。
|
||
|
||
```bash
|
||
cd peidu/admin
|
||
npm run build
|
||
```
|
||
|
||
**检查点**：
|
||
- [ ] 编译成功，没有错误
|
||
- [ ] `dist` 目录已更新
|
||
- [ ] 浏览器已刷新（Ctrl+F5 强制刷新）
|
||
|
||
### 步骤3: 检查上传请求 ⭐
|
||
|
||
打开浏览器开发者工具（F12）：
|
||
|
||
1. **切换到 Network 面板**
|
||
2. **点击上传图片**
|
||
3. **找到 `/api/file/upload` 请求**
|
||
4. **查看 Response**
|
||
|
||
#### 期望的正确响应：
|
||
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "上传成功",
|
||
"data": {
|
||
"fileName": "20260125_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg",
|
||
"fileUrl": "https://px.ddn-ai.cloud/uploads/20260125_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg",
|
||
"fileSize": "123456",
|
||
"fileType": "jpg"
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 如果看到错误响应：
|
||
|
||
**404 错误**：
|
||
```json
|
||
{
|
||
"code": 404,
|
||
"message": "接口不存在"
|
||
}
|
||
```
|
||
→ 说明后端没有 `/api/file/upload` 接口，需要检查后端代码
|
||
|
||
**500 错误**：
|
||
```json
|
||
{
|
||
"code": 500,
|
||
"message": "远程上传失败: ..."
|
||
}
|
||
```
|
||
→ 说明远程上传到服务器失败，需要检查服务器连接
|
||
|
||
### 步骤4: 检查配置文件
|
||
|
||
#### 后端配置 (`application.yml`)
|
||
|
||
```yaml
|
||
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`)
|
||
|
||
```vue
|
||
<el-upload
|
||
action="/api/file/upload"
|
||
name="file"
|
||
...
|
||
>
|
||
```
|
||
|
||
**检查点**：
|
||
- [ ] `action="/api/file/upload"` (不是 `/api/upload/image`)
|
||
- [ ] `name="file"` (参数名必须是 file)
|
||
|
||
### 步骤5: 测试服务器接口
|
||
|
||
测试服务器的直接上传接口是否可用：
|
||
|
||
```bash
|
||
# 在浏览器中访问
|
||
https://px.ddn-ai.cloud/api/file/config
|
||
|
||
# 应该返回配置信息
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"mode": "local",
|
||
"maxSize": "10MB",
|
||
...
|
||
}
|
||
}
|
||
```
|
||
|
||
**检查点**：
|
||
- [ ] 服务器接口可访问
|
||
- [ ] 返回正确的配置信息
|
||
|
||
## 常见问题
|
||
|
||
### 问题1: 后端没有重启
|
||
|
||
**症状**: 上传后返回旧URL格式
|
||
|
||
**解决**:
|
||
1. 停止后端进程
|
||
2. 重新启动后端
|
||
3. 确认配置已加载
|
||
|
||
### 问题2: 管理后台没有重新编译
|
||
|
||
**症状**: 上传请求还是发到旧接口 `/api/upload/image`
|
||
|
||
**解决**:
|
||
```bash
|
||
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
|