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` 后必须重启后端。

```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