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

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
}

上传图片到七牛云

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)

完整的图片上传页面，包含：

• 图片选择功能
• 预览功能
• 上传进度显示
• 错误处理
• 结果展示

使用方法

方法一：跳转到上传页面

// 跳转到上传页面
uni.navigateTo({
  url: '/pages/image-upload/image-upload'
})

// 监听上传成功事件
uni.$on('image-upload-success', (imageUrl) => {
  console.log('上传成功:', imageUrl)
})

方法二：内嵌上传功能

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 中注册了相关页面：

{
  "pages": [
    {
      "path": "pages/image-upload/image-upload",
      "style": {
        "navigationBarTitleText": "图片上传",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/image-upload-demo/image-upload-demo",
      "style": {
        "navigationBarTitleText": "图片上传演示",
        "navigationStyle": "custom"
      }
    }
  ]
}

功能特点

✅ 已实现功能

• 图片选择和预览
• 七牛云上传
• 上传进度显示
• 错误处理和提示
• 结果URL展示
• URL复制功能
• 多种使用方式
• 完整的示例代码

🔧 技术特性

• 支持相册和相机选择
• 自动获取七牛云上传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 - 使用示例