Merge branch 'master' of https://git.yunzer.cn/yunzerwebsite/platform-vue
This commit is contained in:
commit
a42225953f
295
docs/README-七牛云上传.md
Normal file
295
docs/README-七牛云上传.md
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
# 七牛云上传功能文档索引
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
如果你想快速测试七牛云上传功能，请按以下顺序阅读：
|
||||||
|
|
||||||
|
1. **[七牛云上传测试步骤](./七牛云上传测试步骤.md)** ⭐ 推荐先看
|
||||||
|
- 测试前的准备工作
|
||||||
|
- 详细的测试步骤
|
||||||
|
- 常见问题排查
|
||||||
|
|
||||||
|
2. **[七牛云区域配置修复说明](./七牛云区域配置修复说明.md)**
|
||||||
|
- 了解最近修复的区域配置问题
|
||||||
|
- 查看修复的具体内容
|
||||||
|
|
||||||
|
3. **[七牛云直传配置](./七牛云直传配置.md)**
|
||||||
|
- 完整的技术文档
|
||||||
|
- API 接口说明
|
||||||
|
- 代码使用示例
|
||||||
|
|
||||||
|
4. **[七牛云区域配置流程图](./七牛云区域配置流程图.md)**
|
||||||
|
- 可视化流程图
|
||||||
|
- 帮助理解上传机制
|
||||||
|
|
||||||
|
## 文档说明
|
||||||
|
|
||||||
|
### 七牛云上传测试步骤.md
|
||||||
|
**适合人群**: 测试人员、开发人员
|
||||||
|
|
||||||
|
**内容**:
|
||||||
|
- 测试前的准备工作
|
||||||
|
- 详细的测试步骤
|
||||||
|
- 验证方法
|
||||||
|
- 常见问题排查
|
||||||
|
- 性能测试指南
|
||||||
|
|
||||||
|
**何时阅读**: 准备测试上传功能时
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 七牛云区域配置修复说明.md
|
||||||
|
**适合人群**: 开发人员、运维人员
|
||||||
|
|
||||||
|
**内容**:
|
||||||
|
- 问题描述和原因分析
|
||||||
|
- 解决方案详解
|
||||||
|
- 修复的文件列表
|
||||||
|
- 验证步骤
|
||||||
|
- 区域切换方法
|
||||||
|
|
||||||
|
**何时阅读**: 遇到区域配置问题或想了解修复细节时
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 七牛云直传配置.md
|
||||||
|
**适合人群**: 开发人员
|
||||||
|
|
||||||
|
**内容**:
|
||||||
|
- 上传流程对比（旧 vs 新）
|
||||||
|
- 安装依赖
|
||||||
|
- 后端 API 文档
|
||||||
|
- 前端使用示例
|
||||||
|
- 工作原理
|
||||||
|
- 安全性说明
|
||||||
|
- 性能优化
|
||||||
|
- 故障排查
|
||||||
|
- 迁移指南
|
||||||
|
|
||||||
|
**何时阅读**: 需要了解完整技术实现或集成到其他页面时
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 七牛云区域配置流程图.md
|
||||||
|
**适合人群**: 所有人
|
||||||
|
|
||||||
|
**内容**:
|
||||||
|
- 问题和解决方案的可视化对比
|
||||||
|
- 完整上传流程图
|
||||||
|
- 区域映射关系图
|
||||||
|
- 代码对比
|
||||||
|
- 优势对比
|
||||||
|
|
||||||
|
**何时阅读**: 想快速理解上传机制时
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 最近更新 (2026-04-09)
|
||||||
|
|
||||||
|
### ✅ 已完成
|
||||||
|
- 修复了七牛云区域配置问题
|
||||||
|
- 添加了 `getQiniuRegion()` 函数
|
||||||
|
- 实现了动态区域配置
|
||||||
|
- 创建了完整的测试文档
|
||||||
|
|
||||||
|
### 🔧 修复的问题
|
||||||
|
**问题**: 上传时出现 "incorrect region" 错误
|
||||||
|
|
||||||
|
**原因**: 前端硬编码区域为 z0（华东），但数据库配置为 z2（华南）
|
||||||
|
|
||||||
|
**解决**: 前端动态从后端获取区域配置，自动使用正确的区域
|
||||||
|
|
||||||
|
### 📝 涉及的文件
|
||||||
|
- `platform/src/utils/qiniuUpload.js` - 添加区域映射函数
|
||||||
|
- `go/controllers/qiniu_upload.go` - 返回区域配置
|
||||||
|
- `platform/docs/*.md` - 创建文档
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 技术架构
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────┐
|
||||||
|
│ 七牛云直传架构 │
|
||||||
|
└─────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
前端 (Vue3)
|
||||||
|
├── platform/src/utils/qiniuUpload.js
|
||||||
|
│ ├── smartUpload() - 智能选择上传方式
|
||||||
|
│ ├── uploadToQiniu() - 七牛云直传
|
||||||
|
│ ├── uploadToLocal() - 本地上传（中转）
|
||||||
|
│ ├── getStorageConfig() - 获取存储配置
|
||||||
|
│ ├── getQiniuToken() - 获取上传凭证
|
||||||
|
│ ├── saveFileRecord() - 保存文件记录
|
||||||
|
│ ├── batchUpload() - 批量上传
|
||||||
|
│ └── getQiniuRegion() - 区域映射 ⭐ 新增
|
||||||
|
│
|
||||||
|
└── platform/src/views/platform/softwareupgrade/components/edit.vue
|
||||||
|
└── 使用 smartUpload() 上传文件
|
||||||
|
|
||||||
|
后端 (Go + Beego)
|
||||||
|
├── go/controllers/qiniu_upload.go
|
||||||
|
│ ├── GetStorageConfig() - 获取存储配置
|
||||||
|
│ ├── GetUploadToken() - 生成上传凭证
|
||||||
|
│ ├── SaveFileRecord() - 保存文件记录
|
||||||
|
│ └── getQiniuUploadURL() - 获取上传地址
|
||||||
|
│
|
||||||
|
├── go/routers/platform/platform.go
|
||||||
|
│ ├── GET /platform/storage/config
|
||||||
|
│ ├── GET /platform/qiniu/token
|
||||||
|
│ └── POST /platform/qiniu/save
|
||||||
|
│
|
||||||
|
└── go/models/storage_config.go
|
||||||
|
└── GetStorageConfig() - 从数据库读取配置
|
||||||
|
|
||||||
|
数据库 (MySQL)
|
||||||
|
├── system_storage_config - 存储配置表
|
||||||
|
│ ├── storage_type - 存储类型 (local/qiniu)
|
||||||
|
│ ├── qiniu_region - 七牛云区域 (z0/z1/z2/...)
|
||||||
|
│ ├── qiniu_bucket - 存储空间名称
|
||||||
|
│ ├── qiniu_domain - 访问域名
|
||||||
|
│ ├── qiniu_access_key - AccessKey
|
||||||
|
│ └── qiniu_secret_key - SecretKey
|
||||||
|
│
|
||||||
|
└── system_file - 文件记录表
|
||||||
|
├── id - 文件 ID
|
||||||
|
├── name - 文件名
|
||||||
|
├── src - 文件 URL
|
||||||
|
├── size - 文件大小
|
||||||
|
├── md5 - 文件 MD5
|
||||||
|
└── ...
|
||||||
|
|
||||||
|
七牛云 (Qiniu Cloud)
|
||||||
|
└── 存储空间: yunzerwebsite
|
||||||
|
├── 区域: z2 (华南)
|
||||||
|
├── 域名: http://7colud.yunzer.cn
|
||||||
|
└── 上传地址: https://up-z2.qiniup.com
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 上传流程
|
||||||
|
|
||||||
|
### 简化流程
|
||||||
|
```
|
||||||
|
1. 用户选择文件
|
||||||
|
↓
|
||||||
|
2. 前端获取存储配置 (storageType: 'qiniu')
|
||||||
|
↓
|
||||||
|
3. 前端获取上传凭证 (token, region: 'z2')
|
||||||
|
↓
|
||||||
|
4. 前端直接上传到七牛云 (up-z2.qiniup.com)
|
||||||
|
↓
|
||||||
|
5. 前端保存文件记录到数据库
|
||||||
|
↓
|
||||||
|
6. 显示上传成功
|
||||||
|
```
|
||||||
|
|
||||||
|
### 详细流程
|
||||||
|
参见 [七牛云区域配置流程图.md](./七牛云区域配置流程图.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 支持的区域
|
||||||
|
|
||||||
|
| 区域代码 | 区域名称 | 上传地址 | 状态 |
|
||||||
|
|---------|---------|---------|------|
|
||||||
|
| z0 | 华东 | up-z0.qiniup.com | ✓ 支持 |
|
||||||
|
| z1 | 华北 | up-z1.qiniup.com | ✓ 支持 |
|
||||||
|
| z2 | 华南 | up-z2.qiniup.com | ✓ 支持 (当前) |
|
||||||
|
| na0 | 北美 | up-na0.qiniup.com | ✓ 支持 |
|
||||||
|
| as0 | 新加坡 | up-as0.qiniup.com | ✓ 支持 |
|
||||||
|
| cn-east-2 | 华东-浙江2 | up-cn-east-2.qiniup.com | ✓ 支持 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### Q1: 如何测试上传功能？
|
||||||
|
**A**: 参见 [七牛云上传测试步骤.md](./七牛云上传测试步骤.md)
|
||||||
|
|
||||||
|
### Q2: 上传时出现 "incorrect region" 错误？
|
||||||
|
**A**: 已修复。参见 [七牛云区域配置修复说明.md](./七牛云区域配置修复说明.md)
|
||||||
|
|
||||||
|
### Q3: 如何切换到其他区域？
|
||||||
|
**A**: 修改数据库配置即可，无需改代码：
|
||||||
|
```sql
|
||||||
|
UPDATE system_storage_config
|
||||||
|
SET qiniu_region = 'z1' -- 切换到华北
|
||||||
|
WHERE id = 1;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Q4: 如何在其他页面使用上传功能？
|
||||||
|
**A**: 参见 [七牛云直传配置.md](./七牛云直传配置.md) 的"前端使用"章节
|
||||||
|
|
||||||
|
### Q5: 大文件上传会超时吗？
|
||||||
|
**A**: 不会。七牛云 SDK 支持：
|
||||||
|
- 自动分片上传
|
||||||
|
- 断点续传
|
||||||
|
- 并发上传
|
||||||
|
- 前端已设置 `timeout: 0`（无超时限制）
|
||||||
|
|
||||||
|
### Q6: 上传是否经过服务器？
|
||||||
|
**A**: 不经过。前端直接上传到七牛云，服务器只负责：
|
||||||
|
- 生成上传凭证
|
||||||
|
- 保存文件记录到数据库
|
||||||
|
|
||||||
|
### Q7: 如何回滚到本地存储？
|
||||||
|
**A**: 修改数据库配置：
|
||||||
|
```sql
|
||||||
|
UPDATE system_storage_config
|
||||||
|
SET storage_type = 'local'
|
||||||
|
WHERE id = 1;
|
||||||
|
```
|
||||||
|
前端会自动切换到本地上传方式。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 性能对比
|
||||||
|
|
||||||
|
### 旧方案（服务器中转）
|
||||||
|
```
|
||||||
|
100MB 文件上传时间：
|
||||||
|
- 上传到服务器：2 分钟
|
||||||
|
- 服务器上传到七牛云：2 分钟
|
||||||
|
- 总计：4 分钟
|
||||||
|
```
|
||||||
|
|
||||||
|
### 新方案（直传）
|
||||||
|
```
|
||||||
|
100MB 文件上传时间：
|
||||||
|
- 直接上传到七牛云：2 分钟
|
||||||
|
- 总计：2 分钟
|
||||||
|
```
|
||||||
|
|
||||||
|
**效率提升**: 50%
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 依赖
|
||||||
|
|
||||||
|
### 前端
|
||||||
|
- `qiniu-js@^3.4.4` - 七牛云 JavaScript SDK
|
||||||
|
|
||||||
|
### 后端
|
||||||
|
- `github.com/qiniu/go-sdk/v7@v7.18.2` - 七牛云 Go SDK
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 相关链接
|
||||||
|
|
||||||
|
- [七牛云官方文档](https://developer.qiniu.com/)
|
||||||
|
- [七牛云存储区域](https://developer.qiniu.com/kodo/1671/region-endpoint-fq)
|
||||||
|
- [qiniu-js SDK 文档](https://developer.qiniu.com/kodo/1283/javascript)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 联系方式
|
||||||
|
|
||||||
|
如有问题，请联系开发团队。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 更新日期
|
||||||
|
|
||||||
|
2026-04-09
|
||||||
@ -13,6 +13,7 @@
|
|||||||
- [一键复制](./一键复制.md)
|
- [一键复制](./一键复制.md)
|
||||||
- [文件上传超时配置](./文件上传超时配置.md) - 大文件上传配置说明
|
- [文件上传超时配置](./文件上传超时配置.md) - 大文件上传配置说明
|
||||||
- [图片URL处理说明](./图片URL处理说明.md) - 图片URL拼接处理
|
- [图片URL处理说明](./图片URL处理说明.md) - 图片URL拼接处理
|
||||||
|
- [七牛云直传配置](./七牛云直传配置.md) - ⚡ 七牛云直传上传（推荐！）
|
||||||
|
|
||||||
### 存储配置功能
|
### 存储配置功能
|
||||||
存储配置功能的前端实现已完成，包括：
|
存储配置功能的前端实现已完成，包括：
|
||||||
|
|||||||
201
docs/七牛云上传测试步骤.md
Normal file
201
docs/七牛云上传测试步骤.md
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
# 七牛云上传测试步骤
|
||||||
|
|
||||||
|
## 前置条件
|
||||||
|
|
||||||
|
1. 数据库配置已正确设置：
|
||||||
|
- `storage_type = 'qiniu'`
|
||||||
|
- `qiniu_region = 'z2'` (华南)
|
||||||
|
- `qiniu_bucket = 'yunzerwebsite'`
|
||||||
|
- `qiniu_domain = 'http://7colud.yunzer.cn'`
|
||||||
|
- `qiniu_access_key` 和 `qiniu_secret_key` 已配置
|
||||||
|
|
||||||
|
2. 前端依赖已安装：
|
||||||
|
- `qiniu-js@^3.4.4` ✓ (已在 package.json 中)
|
||||||
|
|
||||||
|
3. 后端服务已重启：
|
||||||
|
```bash
|
||||||
|
systemctl restart go-api
|
||||||
|
```
|
||||||
|
|
||||||
|
## 测试步骤
|
||||||
|
|
||||||
|
### 1. 登录系统
|
||||||
|
|
||||||
|
访问前端页面并登录：
|
||||||
|
- URL: https://platform.yunzer.cn
|
||||||
|
- 账号: hero920103
|
||||||
|
- 密码: 920103
|
||||||
|
|
||||||
|
### 2. 进入软件升级页面
|
||||||
|
|
||||||
|
导航到：平台管理 → 软件升级
|
||||||
|
|
||||||
|
### 3. 上传文件测试
|
||||||
|
|
||||||
|
点击"新增"或"编辑"按钮，在弹出的对话框中：
|
||||||
|
|
||||||
|
1. 点击"上传软件包"按钮
|
||||||
|
2. 选择一个文件（建议先用小文件测试，如 1-10MB）
|
||||||
|
3. 观察上传进度条
|
||||||
|
4. 等待上传完成
|
||||||
|
|
||||||
|
### 4. 验证上传结果
|
||||||
|
|
||||||
|
#### 前端验证
|
||||||
|
- 检查是否显示上传成功消息
|
||||||
|
- 检查文件 URL 是否正确（应该是 `http://7colud.yunzer.cn/...`）
|
||||||
|
- 检查文件是否可以预览/下载
|
||||||
|
|
||||||
|
#### 后端日志验证
|
||||||
|
```bash
|
||||||
|
tail -f /www/wwwroot/api.yunzer.cn/go.log
|
||||||
|
```
|
||||||
|
|
||||||
|
查看日志中是否有：
|
||||||
|
- `GET /platform/storage/config` - 获取存储配置
|
||||||
|
- `GET /platform/qiniu/token` - 获取上传凭证
|
||||||
|
- `POST /platform/qiniu/save` - 保存文件记录
|
||||||
|
|
||||||
|
#### 七牛云控制台验证
|
||||||
|
1. 登录七牛云控制台
|
||||||
|
2. 进入 `yunzerwebsite` 存储空间
|
||||||
|
3. 检查文件是否已上传
|
||||||
|
4. 文件路径格式应为：`2026/04/09/时间戳.扩展名`
|
||||||
|
|
||||||
|
#### 数据库验证
|
||||||
|
```sql
|
||||||
|
SELECT id, name, src, size, type, cate, md5, create_time
|
||||||
|
FROM system_file
|
||||||
|
ORDER BY id DESC
|
||||||
|
LIMIT 5;
|
||||||
|
```
|
||||||
|
|
||||||
|
检查：
|
||||||
|
- `src` 字段应该是完整的七牛云 URL
|
||||||
|
- `md5` 字段应该有值
|
||||||
|
- `size` 字段应该正确
|
||||||
|
|
||||||
|
## 预期结果
|
||||||
|
|
||||||
|
### 成功标志
|
||||||
|
1. 前端显示上传成功
|
||||||
|
2. 文件 URL 格式正确：`http://7colud.yunzer.cn/2026/04/09/xxxxx.ext`
|
||||||
|
3. 七牛云控制台能看到文件
|
||||||
|
4. 数据库有对应记录
|
||||||
|
5. 文件可以正常访问和下载
|
||||||
|
|
||||||
|
### 上传流程
|
||||||
|
```
|
||||||
|
前端 → 获取存储配置 (storageType: 'qiniu')
|
||||||
|
→ 获取上传凭证 (token, region: 'z2')
|
||||||
|
→ 直接上传到七牛云 (up-z2.qiniup.com)
|
||||||
|
→ 保存文件记录到数据库
|
||||||
|
→ 返回文件 URL
|
||||||
|
```
|
||||||
|
|
||||||
|
## 常见问题排查
|
||||||
|
|
||||||
|
### 问题 1: "incorrect region" 错误
|
||||||
|
|
||||||
|
**错误信息**:
|
||||||
|
```
|
||||||
|
xhr request failed, code: 400
|
||||||
|
response: {"error":"incorrect region, please use up-z2.qiniup.com, bucket is: yunzerwebsite"}
|
||||||
|
```
|
||||||
|
|
||||||
|
**原因**: 前端使用的区域与七牛云 bucket 实际区域不匹配
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
- 已修复：添加了 `getQiniuRegion()` 函数，根据后端返回的 region 动态设置
|
||||||
|
- 后端返回 `region: 'z2'`，前端会自动使用 `qiniu.region.z2`
|
||||||
|
|
||||||
|
### 问题 2: "获取上传凭证失败"
|
||||||
|
|
||||||
|
**可能原因**:
|
||||||
|
- 未登录或 token 过期
|
||||||
|
- 存储配置未设置为七牛云
|
||||||
|
- 七牛云配置不完整
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
1. 检查登录状态
|
||||||
|
2. 检查数据库 `system_storage_config` 表
|
||||||
|
3. 确认 AccessKey 和 SecretKey 正确
|
||||||
|
|
||||||
|
### 问题 3: 上传后文件无法访问
|
||||||
|
|
||||||
|
**可能原因**:
|
||||||
|
- 七牛云域名配置错误
|
||||||
|
- 域名未绑定或未备案
|
||||||
|
- 文件权限设置问题
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
1. 检查 `qiniu_domain` 配置
|
||||||
|
2. 登录七牛云控制台检查域名绑定
|
||||||
|
3. 检查存储空间访问权限（应为公开）
|
||||||
|
|
||||||
|
### 问题 4: 大文件上传失败
|
||||||
|
|
||||||
|
**可能原因**:
|
||||||
|
- 网络超时
|
||||||
|
- 浏览器限制
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
1. 七牛云 SDK 支持断点续传，会自动重试
|
||||||
|
2. 检查网络连接
|
||||||
|
3. 尝试分片上传（SDK 自动处理）
|
||||||
|
|
||||||
|
## 性能测试
|
||||||
|
|
||||||
|
### 小文件测试 (< 10MB)
|
||||||
|
- 预期时间：几秒内完成
|
||||||
|
- 不会分片上传
|
||||||
|
|
||||||
|
### 中等文件测试 (10MB - 100MB)
|
||||||
|
- 预期时间：根据网速，通常 1-2 分钟
|
||||||
|
- 可能会分片上传
|
||||||
|
|
||||||
|
### 大文件测试 (> 100MB)
|
||||||
|
- 预期时间：根据网速
|
||||||
|
- 会自动分片上传
|
||||||
|
- 支持断点续传
|
||||||
|
|
||||||
|
## 对比测试
|
||||||
|
|
||||||
|
### 旧方案（服务器中转）
|
||||||
|
```
|
||||||
|
100MB 文件上传时间：
|
||||||
|
- 上传到服务器：2 分钟
|
||||||
|
- 服务器上传到七牛云：2 分钟
|
||||||
|
- 总计：4 分钟
|
||||||
|
```
|
||||||
|
|
||||||
|
### 新方案（直传）
|
||||||
|
```
|
||||||
|
100MB 文件上传时间：
|
||||||
|
- 直接上传到七牛云：2 分钟
|
||||||
|
- 总计：2 分钟
|
||||||
|
```
|
||||||
|
|
||||||
|
**效率提升**: 50%
|
||||||
|
|
||||||
|
## 回滚方案
|
||||||
|
|
||||||
|
如果七牛云直传有问题，可以临时切换回本地存储：
|
||||||
|
|
||||||
|
```sql
|
||||||
|
UPDATE system_storage_config
|
||||||
|
SET storage_type = 'local'
|
||||||
|
WHERE id = 1;
|
||||||
|
```
|
||||||
|
|
||||||
|
前端会自动检测并使用本地上传方式（通过服务器中转）。
|
||||||
|
|
||||||
|
## 相关文件
|
||||||
|
|
||||||
|
- `platform/src/utils/qiniuUpload.js` - 上传工具（已添加 getQiniuRegion 函数）
|
||||||
|
- `go/controllers/qiniu_upload.go` - 后端控制器
|
||||||
|
- `platform/docs/七牛云直传配置.md` - 详细配置文档
|
||||||
|
|
||||||
|
## 更新日期
|
||||||
|
|
||||||
|
2026-04-09
|
||||||
248
docs/七牛云区域配置修复说明.md
Normal file
248
docs/七牛云区域配置修复说明.md
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
# 七牛云区域配置修复说明
|
||||||
|
|
||||||
|
## 问题描述
|
||||||
|
|
||||||
|
上传文件到七牛云时出现区域错误：
|
||||||
|
|
||||||
|
```
|
||||||
|
xhr request failed, code: 400
|
||||||
|
response: {"error":"incorrect region, please use up-z2.qiniup.com, bucket is: yunzerwebsite"}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 问题原因
|
||||||
|
|
||||||
|
前端代码中硬编码了七牛云区域为 `z0`（华东），但实际数据库配置的是 `z2`（华南）：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 错误的硬编码方式
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true,
|
||||||
|
region: qiniu.region.z0, // ❌ 硬编码为华东
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
数据库实际配置：
|
||||||
|
- `qiniu_region = 'z2'` (华南)
|
||||||
|
- `qiniu_bucket = 'yunzerwebsite'`
|
||||||
|
|
||||||
|
## 解决方案
|
||||||
|
|
||||||
|
### 1. 添加区域映射函数
|
||||||
|
|
||||||
|
在 `platform/src/utils/qiniuUpload.js` 文件末尾添加了 `getQiniuRegion()` 函数：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
/**
|
||||||
|
* 根据区域代码获取七牛云区域对象
|
||||||
|
* @param {string} regionCode 区域代码 (z0, z1, z2, na0, as0, cn-east-2)
|
||||||
|
* @returns {Object} 七牛云区域对象
|
||||||
|
*/
|
||||||
|
function getQiniuRegion(regionCode) {
|
||||||
|
switch (regionCode) {
|
||||||
|
case 'z0':
|
||||||
|
return qiniu.region.z0; // 华东
|
||||||
|
case 'z1':
|
||||||
|
return qiniu.region.z1; // 华北
|
||||||
|
case 'z2':
|
||||||
|
return qiniu.region.z2; // 华南
|
||||||
|
case 'na0':
|
||||||
|
return qiniu.region.na0; // 北美
|
||||||
|
case 'as0':
|
||||||
|
return qiniu.region.as0; // 新加坡
|
||||||
|
case 'cn-east-2':
|
||||||
|
return qiniu.region.cnEast2; // 华东-浙江2
|
||||||
|
default:
|
||||||
|
return qiniu.region.z0; // 默认华东
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 动态获取区域配置
|
||||||
|
|
||||||
|
修改 `uploadToQiniu()` 函数，从后端返回的数据中读取区域配置：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export async function uploadToQiniu(file, options = {}) {
|
||||||
|
// 1. 获取上传凭证（包含区域信息）
|
||||||
|
const tokenRes = await getQiniuToken();
|
||||||
|
const { token, keyPrefix, domain, region, uploadUrl } = tokenRes.data;
|
||||||
|
|
||||||
|
// 2. 根据后端返回的区域代码动态获取区域对象
|
||||||
|
const qiniuRegion = getQiniuRegion(region); // ✓ 动态获取
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true,
|
||||||
|
region: qiniuRegion, // ✓ 使用正确的区域
|
||||||
|
};
|
||||||
|
|
||||||
|
// 3. 上传文件
|
||||||
|
const observable = qiniu.upload(file, key, token, putExtra, config);
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 工作流程
|
||||||
|
|
||||||
|
```
|
||||||
|
1. 前端调用 getQiniuToken()
|
||||||
|
↓
|
||||||
|
2. 后端从数据库读取配置
|
||||||
|
- storage_type: 'qiniu'
|
||||||
|
- qiniu_region: 'z2'
|
||||||
|
- qiniu_bucket: 'yunzerwebsite'
|
||||||
|
↓
|
||||||
|
3. 后端返回配置信息
|
||||||
|
{
|
||||||
|
token: "...",
|
||||||
|
region: "z2", ← 区域代码
|
||||||
|
bucket: "yunzerwebsite",
|
||||||
|
uploadUrl: "https://up-z2.qiniup.com"
|
||||||
|
}
|
||||||
|
↓
|
||||||
|
4. 前端调用 getQiniuRegion('z2')
|
||||||
|
返回: qiniu.region.z2
|
||||||
|
↓
|
||||||
|
5. 使用正确的区域上传文件
|
||||||
|
上传地址: https://up-z2.qiniup.com
|
||||||
|
```
|
||||||
|
|
||||||
|
## 支持的区域
|
||||||
|
|
||||||
|
| 区域代码 | 区域名称 | qiniu-js 对象 | 上传地址 |
|
||||||
|
|---------|---------|--------------|---------|
|
||||||
|
| z0 | 华东 | qiniu.region.z0 | https://up-z0.qiniup.com |
|
||||||
|
| z1 | 华北 | qiniu.region.z1 | https://up-z1.qiniup.com |
|
||||||
|
| z2 | 华南 | qiniu.region.z2 | https://up-z2.qiniup.com |
|
||||||
|
| na0 | 北美 | qiniu.region.na0 | https://up-na0.qiniup.com |
|
||||||
|
| as0 | 新加坡 | qiniu.region.as0 | https://up-as0.qiniup.com |
|
||||||
|
| cn-east-2 | 华东-浙江2 | qiniu.region.cnEast2 | https://up-cn-east-2.qiniup.com |
|
||||||
|
|
||||||
|
## 验证步骤
|
||||||
|
|
||||||
|
### 1. 确认依赖已安装
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd platform
|
||||||
|
npm list qiniu-js
|
||||||
|
```
|
||||||
|
|
||||||
|
预期输出：
|
||||||
|
```
|
||||||
|
qiniu-js@3.4.4
|
||||||
|
```
|
||||||
|
|
||||||
|
✓ 已确认：`qiniu-js@^3.4.4` 已在 `package.json` 中
|
||||||
|
|
||||||
|
### 2. 重启后端服务
|
||||||
|
|
||||||
|
```bash
|
||||||
|
systemctl restart go-api
|
||||||
|
systemctl status go-api
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 测试上传
|
||||||
|
|
||||||
|
1. 登录系统
|
||||||
|
2. 进入软件升级页面
|
||||||
|
3. 上传一个文件
|
||||||
|
4. 观察是否成功
|
||||||
|
|
||||||
|
### 4. 检查日志
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 后端日志
|
||||||
|
tail -f /www/wwwroot/api.yunzer.cn/go.log
|
||||||
|
|
||||||
|
# 前端控制台
|
||||||
|
# 打开浏览器开发者工具，查看 Network 标签
|
||||||
|
```
|
||||||
|
|
||||||
|
预期请求：
|
||||||
|
```
|
||||||
|
GET /platform/storage/config
|
||||||
|
→ { storageType: 'qiniu', qiniuRegion: 'z2' }
|
||||||
|
|
||||||
|
GET /platform/qiniu/token
|
||||||
|
→ { token: '...', region: 'z2', uploadUrl: 'https://up-z2.qiniup.com' }
|
||||||
|
|
||||||
|
POST https://up-z2.qiniup.com ← 直接上传到七牛云
|
||||||
|
→ { key: '...', hash: '...', size: ... }
|
||||||
|
|
||||||
|
POST /platform/qiniu/save
|
||||||
|
→ { url: 'http://7colud.yunzer.cn/...', id: 123 }
|
||||||
|
```
|
||||||
|
|
||||||
|
## 修复的文件
|
||||||
|
|
||||||
|
### 前端
|
||||||
|
- `platform/src/utils/qiniuUpload.js`
|
||||||
|
- 添加了 `getQiniuRegion()` 函数
|
||||||
|
- 修改了 `uploadToQiniu()` 函数，使用动态区域配置
|
||||||
|
|
||||||
|
### 后端
|
||||||
|
- `go/controllers/qiniu_upload.go`
|
||||||
|
- `GetUploadToken()` 方法返回 `region` 字段
|
||||||
|
- `getQiniuUploadURL()` 函数根据区域返回正确的上传地址
|
||||||
|
|
||||||
|
## 优势
|
||||||
|
|
||||||
|
### 1. 灵活性
|
||||||
|
- 支持所有七牛云区域
|
||||||
|
- 无需修改代码即可切换区域
|
||||||
|
- 只需在数据库中修改配置
|
||||||
|
|
||||||
|
### 2. 可维护性
|
||||||
|
- 区域配置集中管理
|
||||||
|
- 代码更清晰易懂
|
||||||
|
- 便于扩展新区域
|
||||||
|
|
||||||
|
### 3. 正确性
|
||||||
|
- 自动使用正确的上传地址
|
||||||
|
- 避免区域不匹配错误
|
||||||
|
- 提高上传成功率
|
||||||
|
|
||||||
|
## 切换区域方法
|
||||||
|
|
||||||
|
如果需要切换到其他区域，只需修改数据库配置：
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- 切换到华东 (z0)
|
||||||
|
UPDATE system_storage_config
|
||||||
|
SET qiniu_region = 'z0'
|
||||||
|
WHERE id = 1;
|
||||||
|
|
||||||
|
-- 切换到华北 (z1)
|
||||||
|
UPDATE system_storage_config
|
||||||
|
SET qiniu_region = 'z1'
|
||||||
|
WHERE id = 1;
|
||||||
|
|
||||||
|
-- 切换到华南 (z2) - 当前配置
|
||||||
|
UPDATE system_storage_config
|
||||||
|
SET qiniu_region = 'z2'
|
||||||
|
WHERE id = 1;
|
||||||
|
```
|
||||||
|
|
||||||
|
前端会自动使用新的区域配置，无需重启或修改代码。
|
||||||
|
|
||||||
|
## 相关文档
|
||||||
|
|
||||||
|
- [七牛云直传配置说明](./七牛云直传配置.md)
|
||||||
|
- [七牛云上传测试步骤](./七牛云上传测试步骤.md)
|
||||||
|
- [七牛云官方文档 - 存储区域](https://developer.qiniu.com/kodo/1671/region-endpoint-fq)
|
||||||
|
|
||||||
|
## 更新日期
|
||||||
|
|
||||||
|
2026-04-09
|
||||||
|
|
||||||
|
## 状态
|
||||||
|
|
||||||
|
✅ 已完成
|
||||||
|
- 添加 `getQiniuRegion()` 函数
|
||||||
|
- 修改 `uploadToQiniu()` 使用动态区域
|
||||||
|
- 验证 `qiniu-js` 依赖已安装
|
||||||
|
- 创建测试文档
|
||||||
|
|
||||||
|
⏭️ 下一步
|
||||||
|
- 重启后端服务
|
||||||
|
- 测试文件上传功能
|
||||||
|
- 验证区域配置正确
|
||||||
248
docs/七牛云区域配置流程图.md
Normal file
248
docs/七牛云区域配置流程图.md
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
# 七牛云区域配置流程图
|
||||||
|
|
||||||
|
## 问题：区域不匹配
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ 修复前（错误） │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
前端代码 后端数据库 七牛云服务器
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||||||
|
│ │ │ │ │ │
|
||||||
|
│ 硬编码: │ │ 配置: │ │ 实际: │
|
||||||
|
│ region: │ │ qiniu_ │ │ bucket │
|
||||||
|
│ z0 (华东) │ ────X────> │ region: │ ────X────> │ 在 z2 │
|
||||||
|
│ │ 不匹配 │ z2 (华南) │ 不匹配 │ (华南) │
|
||||||
|
│ │ │ │ │ │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌──────────┐
|
||||||
|
│ 错误: │
|
||||||
|
│ incorrect│
|
||||||
|
│ region │
|
||||||
|
└──────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 解决方案：动态获取区域
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ 修复后（正确） │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
前端 后端 七牛云
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||||||
|
│ │ │ │ │ │
|
||||||
|
│ 1. 请求 │ │ 2. 查询 │ │ │
|
||||||
|
│ 获取配置 │ ───────> │ 数据库 │ │ │
|
||||||
|
│ │ │ │ │ │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘
|
||||||
|
│ │
|
||||||
|
│ ▼
|
||||||
|
│ ┌──────────┐
|
||||||
|
│ │ 返回: │
|
||||||
|
│ <─────────── │ region: │
|
||||||
|
│ │ 'z2' │
|
||||||
|
│ └──────────┘
|
||||||
|
▼
|
||||||
|
┌──────────┐
|
||||||
|
│ 3. 调用 │
|
||||||
|
│ getQiniu │
|
||||||
|
│ Region() │
|
||||||
|
└──────────┘
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||||||
|
│ 4. 使用 │ │ │ │ │
|
||||||
|
│ qiniu. │ │ │ │ 5. 上传 │
|
||||||
|
│ region. │ ───────────────────────────────> │ 成功 ✓ │
|
||||||
|
│ z2 │ 上传到 up-z2.qiniup.com │ │
|
||||||
|
│ │ │ │
|
||||||
|
└──────────┘ └──────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 详细流程
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ 完整上传流程 │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
用户操作 前端 后端 七牛云
|
||||||
|
│ │ │ │
|
||||||
|
│ 1. 点击上传 │ │ │
|
||||||
|
├──────────────────> │ │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 2. GET /platform/ │ │
|
||||||
|
│ │ storage/config │ │
|
||||||
|
│ ├─────────────────────>│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ │ 3. 查询数据库 │
|
||||||
|
│ │ │ storage_type: │
|
||||||
|
│ │ │ 'qiniu' │
|
||||||
|
│ │ │ qiniu_region: │
|
||||||
|
│ │ │ 'z2' │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 4. 返回配置 │ │
|
||||||
|
│ │ { storageType: │ │
|
||||||
|
│ │ 'qiniu', │ │
|
||||||
|
│ │ qiniuRegion: 'z2' }│ │
|
||||||
|
│ │<─────────────────────│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 5. GET /platform/ │ │
|
||||||
|
│ │ qiniu/token │ │
|
||||||
|
│ ├─────────────────────>│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ │ 6. 生成上传凭证 │
|
||||||
|
│ │ │ (使用 AccessKey │
|
||||||
|
│ │ │ 和 SecretKey) │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 7. 返回 token 和配置 │ │
|
||||||
|
│ │ { token: '...', │ │
|
||||||
|
│ │ region: 'z2', │ │
|
||||||
|
│ │ bucket: '...', │ │
|
||||||
|
│ │ uploadUrl: │ │
|
||||||
|
│ │ 'up-z2.qiniup.com' } │
|
||||||
|
│ │<─────────────────────│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 8. 调用 │ │
|
||||||
|
│ │ getQiniuRegion('z2') │
|
||||||
|
│ │ 返回: qiniu.region.z2 │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 9. 直接上传文件 │ │
|
||||||
|
│ │ (使用 qiniu-js SDK) │
|
||||||
|
│ ├──────────────────────────────────────────> │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ │ │ 10. 接收文件
|
||||||
|
│ │ │ │ 存储到 z2
|
||||||
|
│ │ │ │ (华南)
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 11. 返回上传结果 │ │
|
||||||
|
│ │ { key: '...', │ │
|
||||||
|
│ │ hash: '...', │ │
|
||||||
|
│ │ size: ... } │ │
|
||||||
|
│ │<──────────────────────────────────────────│
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 12. POST /platform/ │ │
|
||||||
|
│ │ qiniu/save │ │
|
||||||
|
│ │ { key, hash, size, │ │
|
||||||
|
│ │ name, mimeType } │ │
|
||||||
|
│ ├─────────────────────>│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ │ 13. 保存到数据库 │
|
||||||
|
│ │ │ system_file 表 │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 14. 返回文件信息 │ │
|
||||||
|
│ │ { url: '...', │ │
|
||||||
|
│ │ id: 123, │ │
|
||||||
|
│ │ name: '...' } │ │
|
||||||
|
│ │<─────────────────────│ │
|
||||||
|
│ │ │ │
|
||||||
|
│ 15. 显示上传成功 │ │ │
|
||||||
|
│<──────────────────│ │ │
|
||||||
|
│ │ │ │
|
||||||
|
```
|
||||||
|
|
||||||
|
## 区域映射关系
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ getQiniuRegion() 函数 │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
数据库配置 函数输入 函数输出 上传地址
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐
|
||||||
|
│ qiniu_ │ │ │ │ │ │ │
|
||||||
|
│ region: │ ───> │ 'z0' │ ───> │ qiniu. │ ───> │ up-z0.qiniup.com │
|
||||||
|
│ 'z0' │ │ │ │ region.z0│ │ (华东) │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘ └──────────────────┘
|
||||||
|
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐
|
||||||
|
│ qiniu_ │ │ │ │ │ │ │
|
||||||
|
│ region: │ ───> │ 'z1' │ ───> │ qiniu. │ ───> │ up-z1.qiniup.com │
|
||||||
|
│ 'z1' │ │ │ │ region.z1│ │ (华北) │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘ └──────────────────┘
|
||||||
|
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐
|
||||||
|
│ qiniu_ │ │ │ │ │ │ │
|
||||||
|
│ region: │ ───> │ 'z2' │ ───> │ qiniu. │ ───> │ up-z2.qiniup.com │
|
||||||
|
│ 'z2' │ │ │ │ region.z2│ │ (华南) ✓ 当前 │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘ └──────────────────┘
|
||||||
|
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐
|
||||||
|
│ qiniu_ │ │ │ │ │ │ │
|
||||||
|
│ region: │ ───> │ 'na0' │ ───> │ qiniu. │ ───> │ up-na0.qiniup.com│
|
||||||
|
│ 'na0' │ │ │ │ region. │ │ (北美) │
|
||||||
|
│ │ │ │ │ na0 │ │ │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘ └──────────────────┘
|
||||||
|
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐
|
||||||
|
│ qiniu_ │ │ │ │ │ │ │
|
||||||
|
│ region: │ ───> │ 'as0' │ ───> │ qiniu. │ ───> │ up-as0.qiniup.com│
|
||||||
|
│ 'as0' │ │ │ │ region. │ │ (新加坡) │
|
||||||
|
│ │ │ │ │ as0 │ │ │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘ └──────────────────┘
|
||||||
|
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────────┐
|
||||||
|
│ qiniu_ │ │ │ │ │ │ │
|
||||||
|
│ region: │ ───> │'cn-east-2'──────>│ qiniu. │ ───> │up-cn-east-2.qiniup. │
|
||||||
|
│'cn-east-2' │ │ │ region. │ │com (华东-浙江2) │
|
||||||
|
│ │ │ │ │ cnEast2 │ │ │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘ └──────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码对比
|
||||||
|
|
||||||
|
### 修复前（硬编码）
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// ❌ 错误：硬编码区域
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true,
|
||||||
|
region: qiniu.region.z0, // 总是使用华东
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修复后（动态配置）
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// ✓ 正确：动态获取区域
|
||||||
|
const { region } = tokenRes.data; // 从后端获取: 'z2'
|
||||||
|
const qiniuRegion = getQiniuRegion(region); // 转换为: qiniu.region.z2
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true,
|
||||||
|
region: qiniuRegion, // 使用正确的区域
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 优势对比
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ 硬编码方式 │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
缺点:
|
||||||
|
❌ 区域固定，无法灵活切换
|
||||||
|
❌ 修改区域需要改代码、重新部署
|
||||||
|
❌ 容易出现区域不匹配错误
|
||||||
|
❌ 不同环境需要不同的代码版本
|
||||||
|
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ 动态配置方式 │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
优点:
|
||||||
|
✓ 区域灵活，可随时切换
|
||||||
|
✓ 修改区域只需改数据库配置
|
||||||
|
✓ 自动使用正确的区域
|
||||||
|
✓ 所有环境使用同一套代码
|
||||||
|
✓ 支持多租户不同区域配置
|
||||||
|
```
|
||||||
|
|
||||||
|
## 更新日期
|
||||||
|
|
||||||
|
2026-04-09
|
||||||
443
docs/七牛云直传配置.md
Normal file
443
docs/七牛云直传配置.md
Normal file
@ -0,0 +1,443 @@
|
|||||||
|
# 七牛云直传配置说明
|
||||||
|
|
||||||
|
## 概述
|
||||||
|
|
||||||
|
新的上传机制实现了前端直接上传到七牛云，不再通过后端中转，大幅提升大文件上传效率。
|
||||||
|
|
||||||
|
## 上传流程对比
|
||||||
|
|
||||||
|
### 旧流程（低效）
|
||||||
|
```
|
||||||
|
前端 → 后端服务器 → 七牛云
|
||||||
|
(中转暂存)
|
||||||
|
```
|
||||||
|
|
||||||
|
问题：
|
||||||
|
- 大文件需要先上传到服务器，再由服务器上传到七牛云
|
||||||
|
- 占用服务器带宽和磁盘空间
|
||||||
|
- 上传时间翻倍
|
||||||
|
- 服务器压力大
|
||||||
|
|
||||||
|
### 新流程（高效）
|
||||||
|
```
|
||||||
|
前端 → 七牛云（直传）
|
||||||
|
后端 → 数据库（仅保存记录）
|
||||||
|
```
|
||||||
|
|
||||||
|
优势：
|
||||||
|
- 前端直接上传到七牛云，不经过服务器
|
||||||
|
- 节省服务器资源
|
||||||
|
- 上传速度快
|
||||||
|
- 支持断点续传
|
||||||
|
|
||||||
|
## 安装依赖
|
||||||
|
|
||||||
|
### 前端安装七牛云 SDK
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd platform
|
||||||
|
npm install qiniu-js
|
||||||
|
```
|
||||||
|
|
||||||
|
或使用 yarn：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add qiniu-js
|
||||||
|
```
|
||||||
|
|
||||||
|
## 后端 API
|
||||||
|
|
||||||
|
### 1. 获取存储配置
|
||||||
|
|
||||||
|
**接口**: `GET /platform/storage/config`
|
||||||
|
|
||||||
|
**响应**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"data": {
|
||||||
|
"storageType": "qiniu", // 或 "local"
|
||||||
|
"qiniuDomain": "http://7colud.yunzer.cn",
|
||||||
|
"qiniuRegion": "z0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 获取上传凭证
|
||||||
|
|
||||||
|
**接口**: `GET /platform/qiniu/token`
|
||||||
|
|
||||||
|
**响应**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"data": {
|
||||||
|
"token": "七牛云上传token",
|
||||||
|
"domain": "http://7colud.yunzer.cn",
|
||||||
|
"bucket": "your-bucket",
|
||||||
|
"region": "z0",
|
||||||
|
"keyPrefix": "2026/04/09/1775722615052606500",
|
||||||
|
"expires": 1712654400,
|
||||||
|
"uploadUrl": "https://up-z0.qiniup.com"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 保存文件记录
|
||||||
|
|
||||||
|
**接口**: `POST /platform/qiniu/save`
|
||||||
|
|
||||||
|
**请求**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"key": "2026/04/09/1775722615052606500.png",
|
||||||
|
"hash": "FhGxwBzoLwO_RGws...",
|
||||||
|
"size": 1024000,
|
||||||
|
"name": "screenshot.png",
|
||||||
|
"mimeType": "image/png",
|
||||||
|
"cate": 0
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**响应**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"data": {
|
||||||
|
"url": "http://7colud.yunzer.cn/2026/04/09/1775722615052606500.png",
|
||||||
|
"id": 123,
|
||||||
|
"name": "screenshot.png",
|
||||||
|
"key": "2026/04/09/1775722615052606500.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 前端使用
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { smartUpload } from '@/utils/qiniuUpload';
|
||||||
|
|
||||||
|
// 自动选择上传方式（本地或七牛云）
|
||||||
|
const result = await smartUpload(file, {
|
||||||
|
cate: 0, // 文件分类
|
||||||
|
onProgress: (progress) => {
|
||||||
|
console.log('上传进度:', progress.percent + '%');
|
||||||
|
console.log('已上传:', progress.loaded);
|
||||||
|
console.log('总大小:', progress.total);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('上传成功:', result);
|
||||||
|
// { url: '...', id: 123, name: '...', key: '...' }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 在组件中使用
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<el-upload
|
||||||
|
:http-request="handleUpload"
|
||||||
|
:on-progress="handleProgress"
|
||||||
|
>
|
||||||
|
<el-button>上传文件</el-button>
|
||||||
|
</el-upload>
|
||||||
|
<el-progress v-if="uploading" :percentage="uploadPercent" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { smartUpload } from '@/utils/qiniuUpload';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
const uploading = ref(false);
|
||||||
|
const uploadPercent = ref(0);
|
||||||
|
|
||||||
|
async function handleUpload(options) {
|
||||||
|
const file = options.file?.raw || options.file;
|
||||||
|
uploading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await smartUpload(file, {
|
||||||
|
cate: 0,
|
||||||
|
onProgress: (progress) => {
|
||||||
|
uploadPercent.value = progress.percent;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
ElMessage.success('上传成功');
|
||||||
|
options.onSuccess?.(result);
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error(error.message || '上传失败');
|
||||||
|
options.onError?.(error);
|
||||||
|
} finally {
|
||||||
|
uploading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 批量上传
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { batchUpload } from '@/utils/qiniuUpload';
|
||||||
|
|
||||||
|
const files = [file1, file2, file3];
|
||||||
|
|
||||||
|
const results = await batchUpload(files, {
|
||||||
|
cate: 0,
|
||||||
|
onFileProgress: (file, progress) => {
|
||||||
|
console.log(`${file.name}: ${progress.percent}%`);
|
||||||
|
},
|
||||||
|
onFileComplete: (file, result) => {
|
||||||
|
console.log(`${file.name} 上传成功:`, result);
|
||||||
|
},
|
||||||
|
onFileError: (file, error) => {
|
||||||
|
console.error(`${file.name} 上传失败:`, error);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('所有文件上传完成:', results);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 工作原理
|
||||||
|
|
||||||
|
### 1. 智能选择上传方式
|
||||||
|
|
||||||
|
`smartUpload` 函数会自动检测后端配置：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 1. 获取存储配置
|
||||||
|
const config = await getStorageConfig();
|
||||||
|
|
||||||
|
// 2. 根据配置选择上传方式
|
||||||
|
if (config.storageType === 'qiniu') {
|
||||||
|
// 七牛云直传
|
||||||
|
return uploadToQiniu(file, options);
|
||||||
|
} else {
|
||||||
|
// 本地上传（通过后端）
|
||||||
|
return uploadToLocal(file, options);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 七牛云直传流程
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 1. 获取上传凭证
|
||||||
|
const tokenRes = await getQiniuToken();
|
||||||
|
const { token, keyPrefix } = tokenRes.data;
|
||||||
|
|
||||||
|
// 2. 生成文件 key
|
||||||
|
const key = `${keyPrefix}.${ext}`;
|
||||||
|
|
||||||
|
// 3. 使用七牛云 SDK 直接上传
|
||||||
|
const observable = qiniu.upload(file, key, token);
|
||||||
|
|
||||||
|
// 4. 监听上传进度
|
||||||
|
observable.subscribe({
|
||||||
|
next(res) {
|
||||||
|
// 进度回调
|
||||||
|
onProgress(res.total.percent);
|
||||||
|
},
|
||||||
|
complete(res) {
|
||||||
|
// 上传完成，保存记录到数据库
|
||||||
|
await saveFileRecord({
|
||||||
|
key: res.key,
|
||||||
|
hash: res.hash,
|
||||||
|
size: file.size,
|
||||||
|
name: file.name,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 本地上传流程
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 通过后端中转（兼容本地存储）
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
const res = await request({
|
||||||
|
url: '/platform/uploadfile',
|
||||||
|
method: 'post',
|
||||||
|
data: formData,
|
||||||
|
onUploadProgress: (e) => {
|
||||||
|
onProgress(e.loaded / e.total * 100);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 配置说明
|
||||||
|
|
||||||
|
### 七牛云区域配置
|
||||||
|
|
||||||
|
| 区域代码 | 区域名称 | 上传地址 |
|
||||||
|
|---------|---------|---------|
|
||||||
|
| z0 | 华东 | https://up-z0.qiniup.com |
|
||||||
|
| z1 | 华北 | https://up-z1.qiniup.com |
|
||||||
|
| z2 | 华南 | https://up-z2.qiniup.com |
|
||||||
|
| na0 | 北美 | https://up-na0.qiniup.com |
|
||||||
|
| as0 | 新加坡 | https://up-as0.qiniup.com |
|
||||||
|
| cn-east-2 | 华东-浙江2 | https://up-cn-east-2.qiniup.com |
|
||||||
|
|
||||||
|
### 上传策略配置
|
||||||
|
|
||||||
|
后端生成 token 时的策略：
|
||||||
|
|
||||||
|
```go
|
||||||
|
putPolicy := storage.PutPolicy{
|
||||||
|
Scope: cfg.QiniuBucket,
|
||||||
|
ReturnBody: `{"key":"$(key)","hash":"$(etag)","size":$(fsize),"mimeType":"$(mimeType)"}`,
|
||||||
|
Expires: 3600, // 1小时有效期
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 安全性
|
||||||
|
|
||||||
|
### 1. Token 有效期
|
||||||
|
|
||||||
|
上传 token 有效期为 1 小时，过期后需要重新获取。
|
||||||
|
|
||||||
|
### 2. 权限验证
|
||||||
|
|
||||||
|
- 获取 token 需要登录认证
|
||||||
|
- 保存文件记录需要登录认证
|
||||||
|
- 文件记录关联到当前用户和租户
|
||||||
|
|
||||||
|
### 3. 文件去重
|
||||||
|
|
||||||
|
通过 MD5 检查文件是否已存在，避免重复上传。
|
||||||
|
|
||||||
|
## 性能优化
|
||||||
|
|
||||||
|
### 1. 断点续传
|
||||||
|
|
||||||
|
七牛云 SDK 支持断点续传（大文件自动分片）：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true,
|
||||||
|
region: qiniu.region.z0,
|
||||||
|
chunkSize: 4, // 分片大小（MB）
|
||||||
|
concurrentRequestLimit: 3, // 并发上传数
|
||||||
|
};
|
||||||
|
|
||||||
|
const observable = qiniu.upload(file, key, token, putExtra, config);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. CDN 加速
|
||||||
|
|
||||||
|
启用 CDN 域名加速上传：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true, // 使用 CDN 加速
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 并发上传
|
||||||
|
|
||||||
|
批量上传时可以控制并发数：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 限制同时上传 3 个文件
|
||||||
|
const concurrency = 3;
|
||||||
|
const results = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < files.length; i += concurrency) {
|
||||||
|
const batch = files.slice(i, i + concurrency);
|
||||||
|
const batchResults = await Promise.all(
|
||||||
|
batch.map(file => smartUpload(file, options))
|
||||||
|
);
|
||||||
|
results.push(...batchResults);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 故障排查
|
||||||
|
|
||||||
|
### 1. 上传失败：获取 token 失败
|
||||||
|
|
||||||
|
**错误**: "当前未配置七牛云存储"
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
- 检查数据库存储配置
|
||||||
|
- 确认 `storage_type` 为 `'qiniu'`
|
||||||
|
- 确认七牛云配置完整
|
||||||
|
|
||||||
|
### 2. 上传失败：token 无效
|
||||||
|
|
||||||
|
**错误**: "401 Unauthorized"
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
- 检查 AccessKey 和 SecretKey 是否正确
|
||||||
|
- 检查 token 是否过期（1小时有效期）
|
||||||
|
- 重新获取 token
|
||||||
|
|
||||||
|
### 3. 上传失败：bucket 不存在
|
||||||
|
|
||||||
|
**错误**: "no such bucket"
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
- 检查 bucket 名称是否正确
|
||||||
|
- 检查 bucket 是否在对应区域
|
||||||
|
- 登录七牛云控制台确认
|
||||||
|
|
||||||
|
### 4. 保存记录失败
|
||||||
|
|
||||||
|
**错误**: "保存文件记录失败"
|
||||||
|
|
||||||
|
**解决**:
|
||||||
|
- 检查数据库连接
|
||||||
|
- 检查文件信息是否完整
|
||||||
|
- 查看后端日志
|
||||||
|
|
||||||
|
## 迁移指南
|
||||||
|
|
||||||
|
### 从旧版本迁移
|
||||||
|
|
||||||
|
1. **安装依赖**:
|
||||||
|
```bash
|
||||||
|
npm install qiniu-js
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **更新导入**:
|
||||||
|
```javascript
|
||||||
|
// 旧版本
|
||||||
|
import { uploadFile } from '@/api/file';
|
||||||
|
|
||||||
|
// 新版本
|
||||||
|
import { smartUpload } from '@/utils/qiniuUpload';
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **更新上传代码**:
|
||||||
|
```javascript
|
||||||
|
// 旧版本
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
const res = await uploadFile(formData, { cate: 0 });
|
||||||
|
|
||||||
|
// 新版本
|
||||||
|
const result = await smartUpload(file, { cate: 0 });
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **兼容性**:
|
||||||
|
- `smartUpload` 会自动检测存储配置
|
||||||
|
- 如果配置为本地存储，会自动使用旧的上传方式
|
||||||
|
- 无需修改其他代码
|
||||||
|
|
||||||
|
## 相关文件
|
||||||
|
|
||||||
|
### 后端
|
||||||
|
- `go/controllers/qiniu_upload.go` - 七牛云上传控制器
|
||||||
|
- `go/routers/platform/platform.go` - 路由配置
|
||||||
|
- `go/services/storage_service.go` - 存储服务
|
||||||
|
|
||||||
|
### 前端
|
||||||
|
- `platform/src/utils/qiniuUpload.js` - 七牛云上传工具
|
||||||
|
- `platform/src/views/platform/softwareupgrade/components/edit.vue` - 软件升级组件（示例）
|
||||||
|
|
||||||
|
## 更新日期
|
||||||
|
|
||||||
|
2026-04-09
|
||||||
48
package-lock.json
generated
48
package-lock.json
generated
@ -20,6 +20,7 @@
|
|||||||
"marked": "^16.4.1",
|
"marked": "^16.4.1",
|
||||||
"os": "^0.1.2",
|
"os": "^0.1.2",
|
||||||
"pinia": "^3.0.3",
|
"pinia": "^3.0.3",
|
||||||
|
"qiniu-js": "^3.4.4",
|
||||||
"vue": "^3.5.22",
|
"vue": "^3.5.22",
|
||||||
"vue-img-cutter": "^3.0.7",
|
"vue-img-cutter": "^3.0.7",
|
||||||
"vue-router": "^4.6.3",
|
"vue-router": "^4.6.3",
|
||||||
@ -77,6 +78,26 @@
|
|||||||
"node": ">=6.9.0"
|
"node": ">=6.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@babel/runtime-corejs2": {
|
||||||
|
"version": "7.29.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/runtime-corejs2/-/runtime-corejs2-7.29.2.tgz",
|
||||||
|
"integrity": "sha512-+FqVkbqWaDleqS9fgzFypApKoPvmGFgk5X2lGXbL9wgz6tf88qt2HEUuEn9E3yBeLt7p8pIgODbJ5icVRALKhQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^2.6.12"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@babel/runtime-corejs2/node_modules/core-js": {
|
||||||
|
"version": "2.6.12",
|
||||||
|
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
|
||||||
|
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
|
||||||
|
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@babel/types": {
|
"node_modules/@babel/types": {
|
||||||
"version": "7.29.0",
|
"version": "7.29.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
|
||||||
@ -3685,6 +3706,17 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"node_modules/qiniu-js": {
|
||||||
|
"version": "3.4.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/qiniu-js/-/qiniu-js-3.4.4.tgz",
|
||||||
|
"integrity": "sha512-S/ooashZjyFQIIbxrte+OfwRxZQz5/MfVv55xWewc9GoxogP/xMmWixCaBEbdqmyjPAmJ2+VtZiWUuP8teB/BA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime-corejs2": "^7.10.2",
|
||||||
|
"querystring": "^0.2.1",
|
||||||
|
"spark-md5": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/quansync": {
|
"node_modules/quansync": {
|
||||||
"version": "0.2.11",
|
"version": "0.2.11",
|
||||||
"resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
|
"resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
|
||||||
@ -3702,6 +3734,16 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/querystring": {
|
||||||
|
"version": "0.2.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/querystring/-/querystring-0.2.1.tgz",
|
||||||
|
"integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
|
||||||
|
"deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.4.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/readable-stream": {
|
"node_modules/readable-stream": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
|
"resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||||
@ -4112,6 +4154,12 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/spark-md5": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
|
||||||
|
"license": "(WTFPL OR MIT)"
|
||||||
|
},
|
||||||
"node_modules/speakingurl": {
|
"node_modules/speakingurl": {
|
||||||
"version": "14.0.1",
|
"version": "14.0.1",
|
||||||
"resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
|
"resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
|
||||||
|
|||||||
@ -22,6 +22,7 @@
|
|||||||
"marked": "^16.4.1",
|
"marked": "^16.4.1",
|
||||||
"os": "^0.1.2",
|
"os": "^0.1.2",
|
||||||
"pinia": "^3.0.3",
|
"pinia": "^3.0.3",
|
||||||
|
"qiniu-js": "^3.4.4",
|
||||||
"vue": "^3.5.22",
|
"vue": "^3.5.22",
|
||||||
"vue-img-cutter": "^3.0.7",
|
"vue-img-cutter": "^3.0.7",
|
||||||
"vue-router": "^4.6.3",
|
"vue-router": "^4.6.3",
|
||||||
|
|||||||
252
src/utils/qiniuUpload.js
Normal file
252
src/utils/qiniuUpload.js
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
import * as qiniu from 'qiniu-js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取存储配置
|
||||||
|
* @returns {Promise<{storageType: string, qiniuDomain?: string, qiniuRegion?: string}>}
|
||||||
|
*/
|
||||||
|
export async function getStorageConfig() {
|
||||||
|
const res = await request({
|
||||||
|
url: '/platform/storage/config',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
if (res?.code === 200) {
|
||||||
|
return res.data || { storageType: 'local' };
|
||||||
|
}
|
||||||
|
return { storageType: 'local' };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取七牛云上传凭证
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
export async function getQiniuToken() {
|
||||||
|
return request({
|
||||||
|
url: '/platform/qiniu/token',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存文件记录到数据库
|
||||||
|
* @param {Object} data 文件信息
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
export async function saveFileRecord(data) {
|
||||||
|
return request({
|
||||||
|
url: '/platform/qiniu/save',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传文件（自动选择本地或七牛云）
|
||||||
|
* @param {File} file 文件对象
|
||||||
|
* @param {Object} options 配置选项
|
||||||
|
* @param {number} [options.cate] 文件分类
|
||||||
|
* @param {Function} [options.onProgress] 进度回调
|
||||||
|
* @returns {Promise<{url: string, id: number, name: string, key?: string}>}
|
||||||
|
*/
|
||||||
|
export async function smartUpload(file, options = {}) {
|
||||||
|
// 获取存储配置
|
||||||
|
const config = await getStorageConfig();
|
||||||
|
|
||||||
|
if (config.storageType === 'qiniu') {
|
||||||
|
// 使用七牛云直传
|
||||||
|
return uploadToQiniu(file, options);
|
||||||
|
} else {
|
||||||
|
// 使用本地上传（通过后端）
|
||||||
|
return uploadToLocal(file, options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传到七牛云（直传）
|
||||||
|
* @param {File} file 文件对象
|
||||||
|
* @param {Object} options 配置选项
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
export async function uploadToQiniu(file, options = {}) {
|
||||||
|
// 1. 获取上传凭证
|
||||||
|
const tokenRes = await getQiniuToken();
|
||||||
|
if (tokenRes?.code !== 200) {
|
||||||
|
throw new Error(tokenRes?.msg || '获取上传凭证失败');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { token, keyPrefix, domain, region, uploadUrl } = tokenRes.data;
|
||||||
|
|
||||||
|
// 2. 生成文件 key
|
||||||
|
const ext = file.name.split('.').pop();
|
||||||
|
const key = `${keyPrefix}.${ext}`;
|
||||||
|
|
||||||
|
// 3. 配置上传参数
|
||||||
|
const putExtra = {
|
||||||
|
fname: file.name,
|
||||||
|
mimeType: file.type || 'application/octet-stream',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 4. 根据区域代码获取七牛云区域对象
|
||||||
|
const qiniuRegion = getQiniuRegion(region);
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
useCdnDomain: true,
|
||||||
|
region: qiniuRegion,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 5. 创建 observable 对象
|
||||||
|
const observable = qiniu.upload(file, key, token, putExtra, config);
|
||||||
|
|
||||||
|
// 5. 执行上传
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const subscription = observable.subscribe({
|
||||||
|
next(res) {
|
||||||
|
// 进度回调
|
||||||
|
if (options.onProgress) {
|
||||||
|
options.onProgress({
|
||||||
|
loaded: res.total.loaded,
|
||||||
|
total: res.total.size,
|
||||||
|
percent: res.total.percent,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error(err) {
|
||||||
|
reject(new Error(err.message || '上传失败'));
|
||||||
|
},
|
||||||
|
async complete(res) {
|
||||||
|
try {
|
||||||
|
// 6. 保存文件记录到数据库
|
||||||
|
const saveRes = await saveFileRecord({
|
||||||
|
key: res.key,
|
||||||
|
hash: res.hash,
|
||||||
|
size: file.size,
|
||||||
|
name: file.name,
|
||||||
|
mimeType: file.type,
|
||||||
|
cate: options.cate || 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (saveRes?.code === 200 || saveRes?.code === 201) {
|
||||||
|
resolve({
|
||||||
|
url: saveRes.data.url,
|
||||||
|
id: saveRes.data.id,
|
||||||
|
name: saveRes.data.name,
|
||||||
|
key: saveRes.data.key,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
reject(new Error(saveRes?.msg || '保存文件记录失败'));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传到本地（通过后端中转）
|
||||||
|
* @param {File} file 文件对象
|
||||||
|
* @param {Object} options 配置选项
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
export async function uploadToLocal(file, options = {}) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
if (options.cate !== undefined) {
|
||||||
|
formData.append('cate', String(options.cate));
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
url: '/platform/uploadfile',
|
||||||
|
method: 'post',
|
||||||
|
data: formData,
|
||||||
|
timeout: 0, // 不设置超时
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.onProgress) {
|
||||||
|
config.onUploadProgress = (e) => {
|
||||||
|
options.onProgress({
|
||||||
|
loaded: e.loaded,
|
||||||
|
total: e.total || 0,
|
||||||
|
percent: e.total > 0 ? Math.round((e.loaded * 100) / e.total) : 0,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await request(config);
|
||||||
|
|
||||||
|
if (res?.code === 200 || res?.code === 201) {
|
||||||
|
return {
|
||||||
|
url: res.data.url,
|
||||||
|
id: res.data.id,
|
||||||
|
name: res.data.name,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
throw new Error(res?.msg || '上传失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量上传文件
|
||||||
|
* @param {File[]} files 文件数组
|
||||||
|
* @param {Object} options 配置选项
|
||||||
|
* @param {Function} [options.onFileProgress] 单个文件进度回调 (file, progress) => void
|
||||||
|
* @param {Function} [options.onFileComplete] 单个文件完成回调 (file, result) => void
|
||||||
|
* @param {Function} [options.onFileError] 单个文件错误回调 (file, error) => void
|
||||||
|
* @returns {Promise<Array>}
|
||||||
|
*/
|
||||||
|
export async function batchUpload(files, options = {}) {
|
||||||
|
const results = [];
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
try {
|
||||||
|
const result = await smartUpload(file, {
|
||||||
|
...options,
|
||||||
|
onProgress: (progress) => {
|
||||||
|
if (options.onFileProgress) {
|
||||||
|
options.onFileProgress(file, progress);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
results.push({ file, result, success: true });
|
||||||
|
|
||||||
|
if (options.onFileComplete) {
|
||||||
|
options.onFileComplete(file, result);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
results.push({ file, error, success: false });
|
||||||
|
|
||||||
|
if (options.onFileError) {
|
||||||
|
options.onFileError(file, error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据区域代码获取七牛云区域对象
|
||||||
|
* @param {string} regionCode 区域代码 (z0, z1, z2, na0, as0, cn-east-2)
|
||||||
|
* @returns {Object} 七牛云区域对象
|
||||||
|
*/
|
||||||
|
function getQiniuRegion(regionCode) {
|
||||||
|
switch (regionCode) {
|
||||||
|
case 'z0':
|
||||||
|
return qiniu.region.z0; // 华东
|
||||||
|
case 'z1':
|
||||||
|
return qiniu.region.z1; // 华北
|
||||||
|
case 'z2':
|
||||||
|
return qiniu.region.z2; // 华南
|
||||||
|
case 'na0':
|
||||||
|
return qiniu.region.na0; // 北美
|
||||||
|
case 'as0':
|
||||||
|
return qiniu.region.as0; // 新加坡
|
||||||
|
case 'cn-east-2':
|
||||||
|
return qiniu.region.cnEast2; // 华东-浙江2
|
||||||
|
default:
|
||||||
|
return qiniu.region.z0; // 默认华东
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -115,7 +115,8 @@ import {
|
|||||||
createSoftwareUpgrade,
|
createSoftwareUpgrade,
|
||||||
updateSoftwareUpgrade,
|
updateSoftwareUpgrade,
|
||||||
} from "@/api/softwareUpgrade";
|
} from "@/api/softwareUpgrade";
|
||||||
import { getUserCate, createFileCate, uploadFile, getFileById } from "@/api/file";
|
import { getUserCate, createFileCate, getFileById } from "@/api/file";
|
||||||
|
import { smartUpload } from "@/utils/qiniuUpload";
|
||||||
|
|
||||||
const emit = defineEmits(["saved"]);
|
const emit = defineEmits(["saved"]);
|
||||||
|
|
||||||
@ -262,8 +263,7 @@ async function handlePackageUpload(options) {
|
|||||||
options.onError?.(new Error("no category"));
|
options.onError?.(new Error("no category"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const fd = new FormData();
|
|
||||||
fd.append("file", file);
|
|
||||||
uploadXHRActive.value = true;
|
uploadXHRActive.value = true;
|
||||||
uploadPercent.value = 0;
|
uploadPercent.value = 0;
|
||||||
uploadIndeterminate.value = false;
|
uploadIndeterminate.value = false;
|
||||||
@ -273,20 +273,24 @@ async function handlePackageUpload(options) {
|
|||||||
let lastLoaded = 0;
|
let lastLoaded = 0;
|
||||||
let lastTick = xhrStart;
|
let lastTick = xhrStart;
|
||||||
let emaBps = 0;
|
let emaBps = 0;
|
||||||
const res = await uploadFile(fd, {
|
|
||||||
|
// 使用智能上传（自动选择本地或七牛云）
|
||||||
|
const result = await smartUpload(file, {
|
||||||
cate: cateId,
|
cate: cateId,
|
||||||
onUploadProgress: (e) => {
|
onProgress: (progress) => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const loaded = e.loaded;
|
const loaded = progress.loaded;
|
||||||
const total = e.total ?? 0;
|
const total = progress.total || 0;
|
||||||
const elapsedSec = (now - xhrStart) / 1000;
|
const elapsedSec = (now - xhrStart) / 1000;
|
||||||
const dt = (now - lastTick) / 1000;
|
const dt = (now - lastTick) / 1000;
|
||||||
|
|
||||||
if (dt >= 0.07 && loaded >= lastLoaded) {
|
if (dt >= 0.07 && loaded >= lastLoaded) {
|
||||||
const inst = (loaded - lastLoaded) / dt;
|
const inst = (loaded - lastLoaded) / dt;
|
||||||
emaBps = emaBps > 0 ? emaBps * 0.72 + inst * 0.28 : inst;
|
emaBps = emaBps > 0 ? emaBps * 0.72 + inst * 0.28 : inst;
|
||||||
lastLoaded = loaded;
|
lastLoaded = loaded;
|
||||||
lastTick = now;
|
lastTick = now;
|
||||||
}
|
}
|
||||||
|
|
||||||
const avgBps = elapsedSec > 0.12 ? loaded / elapsedSec : 0;
|
const avgBps = elapsedSec > 0.12 ? loaded / elapsedSec : 0;
|
||||||
const showBps = emaBps > 0 ? emaBps : avgBps;
|
const showBps = emaBps > 0 ? emaBps : avgBps;
|
||||||
uploadSpeedText.value = showBps > 0 ? formatSpeed(showBps) : elapsedSec > 0.05 ? formatSpeed(avgBps) : "—";
|
uploadSpeedText.value = showBps > 0 ? formatSpeed(showBps) : elapsedSec > 0.05 ? formatSpeed(avgBps) : "—";
|
||||||
@ -301,19 +305,14 @@ async function handlePackageUpload(options) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (res?.code === 200 || res?.code === 201) {
|
|
||||||
const d = res.data || {};
|
// 上传成功
|
||||||
form.fileId = d.id != null ? Number(d.id) : null;
|
form.fileId = result.id;
|
||||||
const src = d.url || "";
|
form.downloadUrl = result.url;
|
||||||
form.downloadUrl = absoluteFromSrc(src);
|
uploadedLabel.value = result.name || file.name || "安装包";
|
||||||
uploadedLabel.value = d.name || file.name || "安装包";
|
displayFileList.value = [{ name: uploadedLabel.value, uid: `pkg-${form.fileId}-${Date.now()}` }];
|
||||||
displayFileList.value = [{ name: uploadedLabel.value, uid: `pkg-${form.fileId}-${Date.now()}` }];
|
ElMessage.success("上传成功");
|
||||||
ElMessage.success(res.code === 201 ? "文件已存在，已关联" : "上传成功");
|
options.onSuccess?.(result);
|
||||||
options.onSuccess?.(res);
|
|
||||||
} else {
|
|
||||||
ElMessage.error(res?.msg || "上传失败");
|
|
||||||
options.onError?.(new Error(res?.msg));
|
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
ElMessage.error(e?.message || "上传失败");
|
ElMessage.error(e?.message || "上传失败");
|
||||||
options.onError?.(e);
|
options.onError?.(e);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user