125 lines
3.1 KiB
Markdown
125 lines
3.1 KiB
Markdown
|
# 管理后台上传接口修复
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
|
|||
|
|
管理后台的多个页面在上传图片时，返回的URL仍然是本地地址格式，没有使用新的统一上传接口。
|
|||
|
|
|
|||
|
|
## 修复内容
|
|||
|
|
|
|||
|
|
### 已修复的文件
|
|||
|
|
|
|||
|
|
1. **轮播图管理** (`peidu/admin/src/views/content/banner.vue`)
|
|||
|
|
- 旧接口: `/api/upload/image`
|
|||
|
|
- 新接口: `/api/file/upload`
|
|||
|
|
- 添加: `name="file"` 参数
|
|||
|
|
|
|||
|
|
2. **系统配置 - Logo上传** (`peidu/admin/src/views/system/config.vue`)
|
|||
|
|
- 旧接口: `/api/upload/image`
|
|||
|
|
- 新接口: `/api/file/upload`
|
|||
|
|
- 添加: `name="file"` 参数
|
|||
|
|
|
|||
|
|
3. **文章编辑 - 封面上传** (`peidu/admin/src/views/content/article-edit.vue`)
|
|||
|
|
- 旧接口: `/api/upload`
|
|||
|
|
- 新接口: `/api/file/upload`
|
|||
|
|
- 添加: `name="file"` 参数
|
|||
|
|
|
|||
|
|
4. **营销弹窗** (`peidu/admin/src/views/marketing/popup.vue`)
|
|||
|
|
- 旧接口: `/upload/image`
|
|||
|
|
- 新接口: `/api/file/upload`
|
|||
|
|
|
|||
|
|
### 已确认正确的文件
|
|||
|
|
|
|||
|
|
5. **媒体管理** (`peidu/admin/src/views/system/media.vue`)
|
|||
|
|
- ✅ 已使用: `/api/file/upload`
|
|||
|
|
|
|||
|
|
### 无需修改的文件
|
|||
|
|
|
|||
|
|
6. **套餐编辑** (`peidu/admin/src/views/package/edit.vue`)
|
|||
|
|
- 使用 `action="#"` 和 `:auto-upload="false"`
|
|||
|
|
- 手动处理上传，无需修改
|
|||
|
|
|
|||
|
|
## 统一上传接口
|
|||
|
|
|
|||
|
|
所有管理后台上传现在统一使用：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
action="/api/file/upload"
|
|||
|
|
name="file" // 重要：后端接收的参数名
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
或使用动态URL：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const uploadUrl = computed(() => import.meta.env.VITE_API_BASE_URL + '/api/file/upload')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 返回数据格式
|
|||
|
|
|
|||
|
|
后端返回格式：
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"message": "上传成功",
|
|||
|
|
"data": {
|
|||
|
|
"fileName": "20260125_xxx.jpg",
|
|||
|
|
"fileUrl": "https://px.ddn-ai.cloud/uploads/20260125_xxx.jpg",
|
|||
|
|
"fileSize": "123456",
|
|||
|
|
"fileType": "jpg"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
前端处理：
|
|||
|
|
```javascript
|
|||
|
|
const handleUploadSuccess = (response) => {
|
|||
|
|
if (response.code === 200 && response.data) {
|
|||
|
|
// 使用 fileUrl 字段
|
|||
|
|
form.imageUrl = response.data.fileUrl
|
|||
|
|
ElMessage.success('上传成功')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 测试步骤
|
|||
|
|
|
|||
|
|
### 1. 重新编译管理后台
|
|||
|
|
```bash
|
|||
|
|
cd peidu/admin
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 测试各个上传功能
|
|||
|
|
- [ ] 轮播图管理 - 上传图片
|
|||
|
|
- [ ] 系统配置 - 上传Logo
|
|||
|
|
- [ ] 文章编辑 - 上传封面
|
|||
|
|
- [ ] 营销弹窗 - 上传图片
|
|||
|
|
- [ ] 媒体管理 - 上传文件
|
|||
|
|
|
|||
|
|
### 3. 验证返回URL格式
|
|||
|
|
期望格式：
|
|||
|
|
```
|
|||
|
|
https://px.ddn-ai.cloud/uploads/20260125_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
不应该出现：
|
|||
|
|
```
|
|||
|
|
❌ http://localhost:8080/uploads/...
|
|||
|
|
❌ http://localhost:8089/uploads/...
|
|||
|
|
❌ /uploads/...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **后端必须重启**: 确保 `application.yml` 的配置已生效
|
|||
|
|
2. **前端需要重新编译**: 修改后需要重新 `npm run build`
|
|||
|
|
3. **清除浏览器缓存**: 避免使用旧的JS文件
|
|||
|
|
4. **检查环境变量**: 确认 `.env.production` 中的 `VITE_API_BASE_URL` 配置正确
|
|||
|
|
|
|||
|
|
## 完成状态
|
|||
|
|
|
|||
|
|
✅ 后端配置已更新 (`application.yml`)
|
|||
|
|
✅ 管理后台所有上传接口已统一
|
|||
|
|
✅ 小程序上传工具已创建 (`upload.js`)
|
|||
|
|
⏳ 等待重新编译和测试
|
|||
|
|
⏳ 小程序其他页面待更新（见更新清单）
|