189 lines
4.3 KiB
Markdown
189 lines
4.3 KiB
Markdown
# 单图上传功能说明
|
||
|
||
## 功能概述
|
||
|
||
本项目提供了完整的单图上传功能，支持选择图片、上传到七牛云、返回图片URL。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
├── api/upload.js # 上传相关API
|
||
├── pages/image-upload/ # 上传页面
|
||
│ └── image-upload.vue
|
||
├── pages/image-upload-demo/ # 演示页面
|
||
│ └── image-upload-demo.vue
|
||
└── examples/ # 使用示例
|
||
└── single-image-upload-usage.vue
|
||
```
|
||
|
||
## 核心功能
|
||
|
||
### 1. API接口 (`api/upload.js`)
|
||
|
||
#### 获取七牛云上传Token
|
||
```javascript
|
||
import { getQiniuUploadToken } from '@/api/upload.js'
|
||
|
||
const res = await getQiniuUploadToken()
|
||
if (res.code === 200) {
|
||
const token = res.data?.token || res.data?.uploadToken || res.token || res.data
|
||
}
|
||
```
|
||
|
||
#### 上传图片到七牛云
|
||
```javascript
|
||
import { uploadToQiniu } from '@/api/upload.js'
|
||
|
||
const result = await uploadToQiniu(filePath, token, key)
|
||
const imageUrl = `https://api.ccttiot.com/${result.key}`
|
||
```
|
||
|
||
### 2. 上传页面 (`pages/image-upload/image-upload.vue`)
|
||
|
||
完整的图片上传页面，包含：
|
||
- 图片选择功能
|
||
- 预览功能
|
||
- 上传进度显示
|
||
- 错误处理
|
||
- 结果展示
|
||
|
||
## 使用方法
|
||
|
||
### 方法一：跳转到上传页面
|
||
|
||
```javascript
|
||
// 跳转到上传页面
|
||
uni.navigateTo({
|
||
url: '/pages/image-upload/image-upload'
|
||
})
|
||
|
||
// 监听上传成功事件
|
||
uni.$on('image-upload-success', (imageUrl) => {
|
||
console.log('上传成功:', imageUrl)
|
||
})
|
||
```
|
||
|
||
### 方法二：内嵌上传功能
|
||
|
||
```javascript
|
||
import { getQiniuUploadToken, uploadToQiniu } from '@/api/upload.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectedImage: '',
|
||
qiniuToken: '',
|
||
uploading: false
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 选择图片
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
this.selectedImage = res.tempFilePaths[0]
|
||
}
|
||
})
|
||
},
|
||
|
||
// 上传图片
|
||
async uploadImage() {
|
||
if (!this.selectedImage) return
|
||
|
||
this.uploading = true
|
||
|
||
try {
|
||
// 获取token
|
||
if (!this.qiniuToken) {
|
||
const res = await getQiniuUploadToken()
|
||
this.qiniuToken = res.data?.token || res.data?.uploadToken || res.token || res.data
|
||
}
|
||
|
||
// 生成文件名
|
||
const key = `uploads/${Date.now()}_${Math.random().toString(36).slice(2)}.jpg`
|
||
|
||
// 上传
|
||
const result = await uploadToQiniu(this.selectedImage, this.qiniuToken, key)
|
||
const imageUrl = `https://api.ccttiot.com/${result.key}`
|
||
|
||
console.log('上传成功:', imageUrl)
|
||
|
||
} catch (error) {
|
||
console.error('上传失败:', error)
|
||
} finally {
|
||
this.uploading = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 页面配置
|
||
|
||
确保在 `pages.json` 中注册了相关页面：
|
||
|
||
```json
|
||
{
|
||
"pages": [
|
||
{
|
||
"path": "pages/image-upload/image-upload",
|
||
"style": {
|
||
"navigationBarTitleText": "图片上传",
|
||
"navigationStyle": "custom"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/image-upload-demo/image-upload-demo",
|
||
"style": {
|
||
"navigationBarTitleText": "图片上传演示",
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 功能特点
|
||
|
||
### ✅ 已实现功能
|
||
- [x] 图片选择和预览
|
||
- [x] 七牛云上传
|
||
- [x] 上传进度显示
|
||
- [x] 错误处理和提示
|
||
- [x] 结果URL展示
|
||
- [x] URL复制功能
|
||
- [x] 多种使用方式
|
||
- [x] 完整的示例代码
|
||
|
||
### 🔧 技术特性
|
||
- 支持相册和相机选择
|
||
- 自动获取七牛云上传Token
|
||
- 智能Token字段解析
|
||
- 唯一文件名生成
|
||
- 完整的错误处理
|
||
- 响应式UI设计
|
||
|
||
## 注意事项
|
||
|
||
1. **Token获取**：确保后端API `/common/qiniu/uploadInfo` 正常工作
|
||
2. **域名配置**：七牛云上传域名已配置为 `https://up-z2.qiniup.com`
|
||
3. **图片域名**：图片访问域名配置为 `https://api.ccttiot.com`
|
||
4. **文件格式**：支持 JPG、PNG 等常见图片格式
|
||
5. **文件大小**：建议图片大小不超过 5MB
|
||
|
||
## 调试
|
||
|
||
如果遇到上传问题，可以：
|
||
|
||
1. 检查控制台日志
|
||
2. 验证Token获取是否成功
|
||
3. 确认网络连接正常
|
||
4. 检查七牛云配置是否正确
|
||
|
||
## 示例页面
|
||
|
||
访问以下页面查看完整示例：
|
||
- `/pages/image-upload-demo/image-upload-demo` - 演示页面
|
||
- `/examples/single-image-upload-usage.vue` - 使用示例 |