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