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`)
|
||
⏳ 等待重新编译和测试
|
||
⏳ 小程序其他页面待更新（见更新清单）
|