HomeLease/README_IMAGE_UPLOAD.md

# 单图上传功能说明

## 功能概述

本项目提供了完整的单图上传功能，支持选择图片、上传到七牛云、返回图片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` - 使用示例